SelectOneButton

[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.

[mert.sincan]

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">

[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;
}

[mert.sincan]

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;
}

[robert.bruguera]

@aragorn, that is perfect. I couldn't never figure that out.
Thank you

[mert.sincan]

Thank you, Robert. Glad for that issue is resolved