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.
SelectOneButton
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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">
Github Profile: https://github.com/mertsincan
-
- Posts: 7
- Joined: 07 Sep 2015, 18:35
@aragorn, thank you so much for helping me out.
That works perfectly but changes all the buttons to the same colors.
I try this but no luck.
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;
}
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;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You can try with;
If you want to change border of selectOneButton, please try with;
And remove this codes in my code;
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;
}
Code: Select all
.MyOneButton.ui-selectonebutton {
border-color: black;
}
Code: Select all
.MyOneButton.ui-selectonebutton div:first-child{
border: 1px solid black;
}
.MyOneButton.ui-selectonebutton div:nth-child(2){
border: 1px solid black;
}
Github Profile: https://github.com/mertsincan
-
- Posts: 7
- Joined: 07 Sep 2015, 18:35
@aragorn, that is perfect. I couldn't never figure that out.
Thank you
Thank you
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thank you, Robert. Glad for that issue is resolved
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 6 guests