ionic showing radio button

Question

My registration form in my ionic project need to show radio buttons. But I have two issues:

1. The checked status not shown.
2. The shape of the radio circle is not correct

Here is my code:

<ion-view view-title="Register">
    <ion-content>
        <form name="signinForm" novalidate="" class="padding">

            <label class="item item-input">Login Name</span>
                <input type="email"                     
                    name="email"
                    placeholder="Email" 
                    ng-model="data.email" 
                    required>
            </label>
            <label class="item item-input">
                <span class="input-label orange-label">Password</span>
                <input type="password" 
                    name="password"
                    placeholder="Password" 
                    ng-model="data.password"
                    ng-minlength="5">
            </label>            

            <label class="item item-input">
                <span class="input-label orange-label">Gender</span>

                <fieldset>
                  <div class="some-class">
                    <label for="y">Male </label>
                    <input type="radio" class="radio" name="x" value="y" id="y" checked />
                    <label for="z">Female </label>
                    <input type="radio" class="radio" name="x" value="z" id="z" />                    
                  </div>
                </fieldset>                
            </label>
        </form>

    </ion-content>
</ion-view>

My css for radio button:

fieldset {
  overflow:hidden;
  border: 0;
}

input[type='radio'] {
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border:1px solid darkgray;
  border-radius:50%;
}

Any idea? Thanks.

Answer 1

That's strange, radio and checkbox's don't behave in ionic. Quick search found this...

https://github.com/driftyco/ionic/issues/423#issuecomment-33045079