Search code examples
jquerycssjquery-mobilejquery-mobile-fieldsetjquery-mobile-radio

jQuery Mobile : How to change Radio button active state color


How to change the radio button background color on selection?

    $("input[type='radio']").click(function(e) {
    $("input[type='radio']").css('background-color', '#ff0000');
});

I have tried this..But it doesn't work.


Its not working.I forgot to share my code

<fieldset data-role="controlgroup" id="custom-fieldset"> <span>Were you able to complete your visit today?</span><br/><input type="radio" id="radio_1134198__4516395" name="sdid_1134198" value="radio_1134198__4516395" /><label for="radio_1134198__4516395">Yes</label>

I got the results like this https://i.sstatic.net/SDGeZ.png . Radio button color has to be changed.


Solution

  • Working example: http://jsfiddle.net/Gajotres/qkCZY/

    Version 1

    HTML :

    <form>
        <fieldset data-role="controlgroup" data-type="horizontal" id="custom-fieldset">
            <legend>Horizontal:</legend>
            <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio"/>
            <label for="radio-choice-h-2a">One</label>
            <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio"/>
            <label for="radio-choice-h-2b">Two</label>
            <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio"/>
            <label for="radio-choice-h-2c">Three</label>
        </fieldset>
    </form>
    

    CSS:

    #custom-fieldset div .ui-radio .ui-radio-on {
        background: red !important;
    }
    

    Version 2

    Working example: http://jsfiddle.net/Gajotres/hTY6k/

    HTML :

    <fieldset data-role="controlgroup" id="custom-fieldset"> 
        <legend>Were you able to complete your visit today?</legend>
        <label for="radio_1134198__4516395">Yes</label>
        <input type="radio" id="radio_1134198__4516395" name="sdid_1134198" value="radio_1134198__4516395"/>
    </fieldset>
    

    CSS :

    #custom-fieldset div .ui-radio label span .ui-icon-radio-on {
        background-color: red !important;
    }
    

    Final notes

    If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.