jQM - Radio button with data icon

by karthick6891

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css">
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<div data-role="page" id="radio-icons"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" ><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow up">&nbsp;</span></div></label>
                
                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2"><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow down">&nbsp;</span></div></label>
            </fieldset>
        </div>
    </div>
</div>

CSS

#custom-label {
    width: 18px;    
    height: 18px;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("images/icons-18-white.png");
    background-repeat: no-repeat;
    border-radius: 9px 9px 9px 9px;  
}

#custom-label span {
    left: 45px !important;
    margin-top: -7px;
}

#custom-label span.up {
    background-position: -180px -1px !important;    
}

#custom-label span.down {
    background-position: -216px -1px !important;    
}