how to change radio buttons style in h:selectOneRadio

Question

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.

score 4 · Answer 1 · answered Oct 04 '12 at 13:48

You'd better specify the element type, not the element ID:

.container input[type=radio] {
    width: 50px !important;
}

Or, give it a styleclass such as <h:selectOneRadio styleClass="myradio">, with this CSS:

.container .myradio input {
    width: 50px !important;
}

Abhishek · Accepted Answer · 2012-10-04T09:31:31.730

2

I hope this helps

<input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">

you have to put backslash like this

.container  #myForm\:sel_radio\:0{
width:100px!important;
}

edited Oct 04 '12 at 09:31

answered Oct 04 '12 at 09:25

Abhishek

270
1
5
16

@MahmoudSaleh As I said in my answer I'm not sure if IE7 has this problem, but why not to support all of the browsers when it's simple as adding 2 more characters ? – Fallup Oct 04 '12 at 10:16
Don't work in IE6/7. See also http://stackoverflow.com/questions/5878692/how-to-use-jsf-generated-html-element-id-in-css-selectors – BalusC Oct 04 '12 at 13:49

Fallup · Answer 3 · 2012-10-04T09:46:57.987

Escape your colons with \3A (hexadecimal code of backslash) , since colon is a special character in CSS or you can define a new style:

 #myForm .container input { 
   width: 50px;
 }

Escaping colons with backslash directly \ is not working in IE6 and I'm not sure if also in IE7. Also avoid using !important if it is possible. It can cause headaches if you will try to change your styles after some time and you forgot about it.

how to change radio buttons style in h:selectOneRadio

3 Answers3