CODEWITHSUNDEEP
qtstylesheetqtstylesheetsqlineedit
trangan
trangan

Reputation: 361

How to set multiple properties in CSS?

I've created CSS for a LineEdit.

LineEdit.cpp

void MyLineEdit::initStyleSheet()
{
  QString css = Css::instance().css( m_element );
  setProperty( "style", "normal" );
  setStyleSheet( css );
}

I have a separate .css file for style:

MyLineEdit.css

....
MyLineEdit[style="Normal"]:focus
{
    border: 1px solid red;
}

MyLineEdit[style="Normal"]:disabled
{
    border: 1px solid gray;
    background: gray;
}

Now there is one weird requirement: MyLineEdit should have a method called setNoFrame, in this function we set one more property for it, and this property is valid for only state disabled.

This is what I did:

MyLineEdit::setNoFrame()
{
  setProperty("noFrame","true");
  initSyleSheet();
}

And this is my updated .css data

....
MyLineEdit[style="Normal"]:focus
{
  border: 1px solid red;
}

MyLineEdit[style="Normal"]:disabled
{
  border: 1px solid gray;
  background: gray;
}

MyLineEdit[style="Normal", noFrame="true"]:disabled
{
  border: none;
  background: gray;
}

It doesn't work as I expected, the border is still there for state disabled and noFrame = true. Do I have mistake in combining properties for CSS above?

Upvotes: 1

Views: 2060

Answers (1)

TrebledJ
TrebledJ

Reputation: 8987

You're really, really close. Try

MyLineEdit[style="Normal"][noFrame="true"]:disabled
{
  border: none;
  background: gray;
}

From the CSS2 docs (which Qt StyleSheets supports):

Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.

Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Upvotes: 1

Related Questions