title: how to change radio buttons style in h:selectOneRadio
body: <p>i have <strong>h:selectOneRadio</strong> as follows:</p>
  
  <pre><code>&lt;div id="container" class="container"&gt;
  &lt;h:selectOneRadio layout="pageDirection" id="sel_radio" value="#{mBean.selectedRadio}"&gt;  
     &lt;f:selectItem id="option1" itemLabel="item1" itemValue="1" /&gt;  
     &lt;f:selectItem id="option2" itemLabel="item2" itemValue="2" /&gt;            
  &lt;/h:selectOneRadio&gt;
  .
  .
  .
  &lt;/div&gt;
  </code></pre>
  
  <p>above will be rendered as follows:</p>
  
  <pre><code>&lt;div id="container" class="container"&gt;
  &lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1"&gt;
  </code></pre>
  
  <p><strong>ISSUE:</strong> the container class gives default width for all inputs, that will affect on my radio button, here's the css class:</p>
  
  <pre><code>.container input {
  width: 200px;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>i tried to override it as by adding following style:</p>
  
  <pre><code>.container #myForm:sel_radio:0 {
    width: 50px !important;
  }
  </code></pre>
  
  <p>but it doesn't work too.</p>
  
  <p>please advise how to fix that, thanks.</p>