how to change radio buttons style in h:selectOneRadio
- by Mahmoud Saleh
i have h:selectOneRadio as follows:
<div id="container" class="container">
<h:selectOneRadio layout="pageDirection" id="sel_radio" value="#{mBean.selectedRadio}">
<f:selectItem id="option1" itemLabel="item1" itemValue="1" />
<f:selectItem id="option2" itemLabel="item2" itemValue="2" />
</h:selectOneRadio>
.
.
.
</div>
above will be rendered as follows:
<div id="container" class="container">
<table>
<tbody>
<tr>
<td>
<input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">
ISSUE: the container class gives default width for all inputs, that will affect on my radio button, here's the css class:
.container input {
width: 200px;
}
and i can't change this class because it's a template and used in other pages, i want to override this style in this page only.
i tried to override it as by adding following style:
.container #myForm:sel_radio:0 {
width: 50px !important;
}
but it doesn't work too.
please advise how to fix that, thanks.
