Page 1 of 1

SelectOneButton

Posted: 18 Sep 2015, 02:42
by robert.bruguera
Hello,
Has anybody being able to change the individual colors of the selectonebutton?
I have change the background color but hover/state/etc stops working.

I'm trying to use 3 or 4 different colors.

Thank you all for you help.

Re: SelectOneButton

Posted: 18 Sep 2015, 10:12
by aragorn
Please try with;

Code: Select all

/*example*/
.MyOneButton.ui-selectonebutton {
    border-color: red;
}

.MyOneButton.ui-selectonebutton .ui-button {
    background-color: yellow;
    color: red;
}

.MyOneButton.ui-selectonebutton .ui-button.ui-state-hover,
.MyOneButton.ui-selectonebutton .ui-state-hover {
    background-color: blue;
}

.MyOneButton.ui-selectonebutton .ui-state-active {
    background-color: green !important;
}

Code: Select all

 <p:selectOneButton styleClass="MyOneButton">

Re: SelectOneButton

Posted: 19 Sep 2015, 01:15
by robert.bruguera
@aragorn, thank you so much for helping me out.
That works perfectly but changes all the buttons to the same colors.

Code: Select all

.MyOneButton.ui-selectonebutton {
    border-color: black;
}

.MyOneButton.ui-selectonebutton .ui-button {
    background-color: #66BB6A;
    color: black;
}

.MyOneButton.ui-selectonebutton .ui-button.ui-state-hover,
.MyOneButton.ui-selectonebutton .ui-state-hover {
    background-color: #85CB88;
}

.MyOneButton.ui-selectonebutton .ui-state-active {
    background-color: green !important;
}
I try this but no luck.

Code: Select all

.MyOneButton.ui-selectonebutton div:first-child{
    border-color: black;
}

.MyOneButton.ui-selectonebutton .ui-button div:first-child{
    background-color: #66BB6A;
    color: black;
}

.MyOneButton.ui-selectonebutton .ui-button.ui-state-hover,
.MyOneButton.ui-selectonebutton .ui-state-hover div:first-child{
    background-color: #85CB88;
}

.MyOneButton.ui-selectonebutton .ui-state-active div:first-child{
    background-color: green !important;
}

.MyOneButton.ui-selectonebutton div:nth-child(2){
    border-color: black;
}

.MyOneButton.ui-selectonebutton .ui-button div:nth-child(2){
    background-color: #E53935;
    color: black;
}

.MyOneButton.ui-selectonebutton .ui-button.ui-state-hover,
.MyOneButton.ui-selectonebutton .ui-state-hover div:nth-child(2){
    background-color: #EA5753;
}

.MyOneButton.ui-selectonebutton .ui-state-active div:nth-child(2){
    background-color: red !important;
}


Re: SelectOneButton

Posted: 19 Sep 2015, 16:25
by aragorn
You can try with;

Code: Select all

.MyOneButton.ui-selectonebutton div:first-child{
    border: 1px solid black;
}

.MyOneButton.ui-selectonebutton div.ui-button:first-child{
    background-color: #66BB6A;
    color: black;
}

.MyOneButton.ui-selectonebutton .ui-button.ui-state-hover,
.MyOneButton.ui-selectonebutton div.ui-state-hover:first-child{
    background-color: #85CB88;
}

.MyOneButton.ui-selectonebutton div.ui-state-active:first-child{
    background-color: green !important;
}

.MyOneButton.ui-selectonebutton div:nth-child(2){
    border: 1px solid black;
}

.MyOneButton.ui-selectonebutton div.ui-button:nth-child(2){
    background-color: #E53935;
    color: black;
}

.MyOneButton.ui-selectonebutton .ui-button.ui-state-hover,
.MyOneButton.ui-selectonebutton div.ui-state-hover:nth-child(2){
    background-color: #EA5753;
}

.MyOneButton.ui-selectonebutton div.ui-state-active:nth-child(2){
    background-color: red !important;
}
If you want to change border of selectOneButton, please try with;

Code: Select all

.MyOneButton.ui-selectonebutton {
    border-color: black;
}
And remove this codes in my code;

Code: Select all

.MyOneButton.ui-selectonebutton div:first-child{
    border: 1px solid black;
}

.MyOneButton.ui-selectonebutton div:nth-child(2){
    border: 1px solid black;
}


Re: SelectOneButton

Posted: 20 Sep 2015, 18:02
by robert.bruguera
@aragorn, that is perfect. I couldn't never figure that out.
Thank you

Re: SelectOneButton

Posted: 21 Sep 2015, 08:16
by aragorn
Thank you, Robert. ;) Glad for that issue is resolved :)