How to apply CSS(background image) to radiobutton when it clicks?


Tags: jquery,css

Problem :

i have set of radio buttons like below,

    <input type="radio" NAME="pizzasize" value="1"/>100&#37; of the time<br />
   <input type="radio" NAME="pizzasize" value="2" />75&#37; of the time<br />
       <input type="radio"  NAME="pizzasize" value="3"/>50&#37; of the time<br />
       <input type="radio"  NAME="pizzasize" value="4"/>25&#37; of the time<br />

i need to change the radiobuttons format like the image in the above. How can i do this?..

Thanks Ravi



Solution :

The easiest thing would probably be to define a class for "selected" and then just assign that class to the checked option of the radiobuttonlist.

$("#whatevertheparentidis :radio").removeClass("selected");
$("#whatevertheparentidis :checked").addClass("selected");

You can define the image as the background image on the .selected class.


    CSS Howto..

    How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

    How to draw X Sign with SVG+CSS?

    How to define alternative font-family corresponding to font-size CSS

    How to change decoration of a local HTML file to show it on the WebView in Android

    How to reset CSS in inline? [closed]

    How can I make a border wrap around a group of pictures?

    How to apply CSS properties of one class in another

    How to debug(make page look like in Firefox) CSS in IE? [duplicate]

    AngularJS - how to refactoring a CSS code style

    How to create a circle and a bar that overlap with css?

    How do I inline the :before element when unable to include a CSS/style section?

    How to control the postioning of a fieldset with css?

    How to fix this css to conform to all browsers?

    How do I justify a horizontal list?

    How can I stop a css background resizing to fit the browser window?

    How do I break the border around text in css?

    How to adopt drop down menu for mobile devices? [closed]

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

    How to capitalize first line with css? ::first-line psuedo-element CSS not working

    How to make css notifications without jQuery? [closed]

    How to reduce the number of sprites when using css sprite technique

    How to set link on image using maplink in responsive theme?

    How can I refer to an internal gradient definition inside an SVG sprite symbol?

    How to select a css class as selected dynamically in mvc

    Formatting text, Suggestions with how-to?

    How to style a video iFrame?

    How to select the second th into the thead of a table having a specific ID using CSS?

    How to float elements with different heights?

    How to animate CSS Translate

    Overflow-x and overflow-y properties, how should they work? [duplicate]