CODEWITHSUNDEEP
javascriptjquerycsshtmljquery-mobile
jjwdesign
jjwdesign

Reputation: 3322

jQuery Mobile 1.4.2 - Radio Buttons with Icons

I'm using jQuery Mobile 1.4.2 to create a horizontal (inline) radio selection for a form. Does anyone know a way to easily add custom icons (png's) or perhaps the jQuery Mobile icons to a Radio Form element?

http://demos.jquerymobile.com/1.4.2/checkboxradio-radio/

There's a nice horizontal demo on w3schools:

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_forms_horizontal

  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue">    
  </fieldset>

Upvotes: 1

Views: 2076

Answers (1)

ezanker
ezanker

Reputation: 24738

You can do this by putting a SPAN in the radio button label and using some jQM classes plus a couple of new rules to put icons inline. In the markup below I have used jQM icons for the first 2 and a custom icon on the last one. The first appears white with the gray disk, the second is black with no disk and the third is a custom 23x23px png.

screenshot

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Choose as many favorite colors as you'd like:</legend>
    <label for="red"><span class="ui-icon-home ui-btn-icon-notext inlineIcon"></span>Red</label>
    <input type="checkbox" name="favcolor" id="red" value="red" />
    <label for="green"><span class="ui-alt-icon ui-icon-bars ui-btn-icon-notext inlineIcon NoDisk"></span>Green</label>
    <input type="checkbox" name="favcolor" id="green" value="green" />
    <label for="blue"><span class="ui-alt-icon ui-icon-myicon ui-btn-icon-notext inlineIcon NoDisk"></span>Blue</label>
    <input type="checkbox" name="favcolor" id="blue" value="blue" />
</fieldset>

To make the icon appear inline, the CSS adds relative positioning and a middle vertical alignment. ui-alt-icon is used to make the jQM icons black. To hide the gray disk, we set the background color of the :after pseudo element to transparent. The last rule creates the custom icon class. 

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: auto !important;
}
.NoDisk:after {
    background-color: transparent;
}
.ui-icon-myicon:after {
    background-image: url("http://lorempixel.com/23/23/technics/1/");
    background-size: 23px 23px;
    border-radius: 0;
}

Here is a DEMO

Upvotes: 4

Related Questions