Commandbutton default state css

UI Components for JSF
Post Reply
karmats
Posts: 16
Joined: 16 Feb 2012, 11:52

16 Feb 2012, 12:03

Hello everyone,

I have been banging my head with this one for quite some time now and hope some of you can help me.

My problem:
I want to override the css for command button when and only when the button is in default state.

What I've tried:
The whole button can be overridden with

Code: Select all

.ui-widget .ui-button { /* css stuffs here*/ }
But I just want to override the default style so I thought it would work to just add the .ui-state-default the css like this

Code: Select all

.ui-widget .ui-button .ui-state-default { /* css stuffs here*/ }
but that was a no go. The browsers didn't even acknowledged this.

Is there any css gurus out there that might help me with this kind of annoying thing?

Thanks

User avatar
T.dot
Expert Member
Posts: 620
Joined: 01 Feb 2012, 15:39
Location: Vienna/Austria

16 Feb 2012, 12:28

This won't work because .ui-button and .ui-state-default are applied to the same component. Your css would only work if they were in a hierachy.

But you could try the following:
.ui-widget button.ui-state-default { /* css stuffs here*/ }
or
.ui-widget input[type="button"].ui-state-default { /* css stuffs here*/ }

karmats
Posts: 16
Joined: 16 Feb 2012, 11:52

16 Feb 2012, 14:59

Hi T.dot and thanks for your answer.
The

Code: Select all

.ui-widget button.ui-state-default
kind of works. Problem is that styling doesn't change when hovering or activating the button. I know this can be solved by

Code: Select all

.ui-widget button.ui-state-hover
and

Code: Select all

.ui-widget button.ui-state-active
.
But what I really want is just to change the css for all default components that has the .ui-button style class defined. Any leads on that?

User avatar
T.dot
Expert Member
Posts: 620
Joined: 01 Feb 2012, 15:39
Location: Vienna/Austria

16 Feb 2012, 15:45

I asked google how you can apply styles to parallel style classes and it should look something like this:

.ui-button.ui-state-default {
background-color: red !important;
}
.ui-button.ui-state-hover {
background-color: green !important;
}
.ui-button.ui-state-active {
background-color: blue !important;
}

karmats
Posts: 16
Joined: 16 Feb 2012, 11:52

21 Feb 2012, 10:45

Thank you T.dot!

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 25 guests