Search code examples
jquery-mobilejquery-mobile-radio

An extra radio circle appear when create a radio button in jQuery mobile

When i create a radio button in jQuery mobile, a radio circle appear in the next of the created radio as appear in the photo , why this extra radio circle appear ? how can i solve this ?? please help me ...

enter image description here

 <fieldset>
 <legend> Gender </legend>
 <div class="ui-grid-a">
 <div class="ui-block-a  ">  
 <input type="radio"   id="Male"    name="radio-group-1"  value="Male" />
 <label  for="Male"    data-inline="true">Male</label>
 </div>
 <div class="ui-block-b">
 <input  type="radio"    id="Female" name="radio-group-1"  value="Female" />
 <label  for="Female"    data-inline="true" >Female</label>
 </div>
 </div>

Solution

  • Override .ui-radio class when you want to change radio button position.

    .ui-radio {
  float:right;
  text-align:right;
}

    Hide radio buttons with a transparent background

    .ui-radio input[type="radio"] {
  display: none;
}

    Demo