SelectOneButton

Locked
robert.bruguera
Posts: 7
Joined: 07 Sep 2015, 18:35

18 Sep 2015, 02:42

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.

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

18 Sep 2015, 10:12

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
Posts: 7
Joined: 07 Sep 2015, 18:35

19 Sep 2015, 01:15

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


aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

19 Sep 2015, 16:25

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
Posts: 7
Joined: 07 Sep 2015, 18:35

20 Sep 2015, 18:02

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

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

21 Sep 2015, 08:16

Thank you, Robert. ;) Glad for that issue is resolved :)

Locked

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest