how to change radio buttons style in h:selectOneRadio

Tags: css,jsf,jsf-2

Problem :

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" />            

above will be rendered as follows:

<div id="container" class="container">
        <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.

Solution :

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{

    CSS Howto..

    how to convert inline CSS into external CSS?

    How to make div layer unselectable in jquery and css

    How to apply css selector in ZK

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    Modify CSS class “two” if class “one” is not shown on screen

    css: how to target p a img

    How to position SVG with CSS?

    How to make header cover entire page length?

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How to display contents of several div tags in a same line

    How to grey out a box in CSS

    How can I get the post text to be beside the avatar and not below it?

    How can I make my web page load faster?

    How to make layout with fixed sized column in Liferay?

    How to use google font

    How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

    How to make a basic event calendar with javascript, jquery, html and css?

    How to Hide a Textbox with only CSS

    Yahoo.widget.Editor - How to configure font size of text

    how to change height of div to covered the text area (CSS)

    How to fix float sidebar in Wordpress with Constructor theme?

    HTML/CSS How do I get 2 completely independant scrollbars?

    How to reference a .css file on a razor view?

    How to make UL Tabs with only HTML CSS

    CSS - how to put divs in the correct position on a webpage [closed]

    How to set color of the Button with jQuery UI?

    How to transition a CSS class between two separate additional classes?

    How to make 3 vertical dots using CSS?

    How to add css class on every third post in wordpress?