Hi All,
I have requirement to change the color of ADF radio button to green when selected and white with green circular border when not selected.I tried to giving the background color on selectors mentioned at http://sqltech.cl/doc/oas11gR1/apirefs.1111/e12419/skin-selectors.html but none of them changed the background of radio button inner circle .so i tried with below code but it still doesn't detect the checked radio button and gives me all radio button with white background color and green border radius so css code which i have mentioned for checked radio button does not take effect.
Does anyone know about how to achieve changing the color of ADF af:selectOneRadio component?
My radio button code
<af:selectOneRadio id="sor1" layout="horizontal" value="PROC_CODE"
styleClass="customRadioButtonComp" simple="true"
autoSubmit="true">
<af:selectItem label="by Procedure" value="PROC_CODE"
id="si1"/>
<af:selectItem label="by Keywords" value="KEYWORDS" id="si3"/>
</af:selectOneRadio>
//Below for unselected radio button
.customRadioButtonComp .input[type="radio"] {
display: inline-block;
width: 10px;
height: 10px;
vertical-align: middle;
cursor: pointer;
appearance: none;
-moz-appearance: none;*/
/* Firefox */
/*-webkit-appearance: none;*/
/* Safari and Chrome */
height: 30px;
width: 30px;
border: 2px solid #40A828;
border-radius: 100px;
background-color:#ffffff
}
//Below for selected radio button
.customRadioButtonComp .input[type="radio"]:checked{
display: inline-block;
width: 10px;
height: 10px;
vertical-align: middle;
cursor: pointer;
appearance: none;
-moz-appearance: none;
/* Firefox */
-webkit-appearance: none;
/* Safari and Chrome */
height: 30px;
width: 30px;
border: 2px solid #40A828;
border-radius: 100px;
background: #40A828 !important ;
}