Radio button not getting checked on click at ie browser

ionic-v1
1

Custom radio button not getting checked on click at ie browser

img
img.jpg240×768 13 KB
.

Html


<div class="common-gender-btn" id="gender">
              <input id="male" type="radio" name="gender" value="Male"/>
              <label class="male icon-male-1" for="male"></label>
              <input id="female" type="radio" name="gender" value="Female"/>
              <label class="female icon-female-1" for="female"></label>
            </div>

css

.common-gender-btn{}

.common-gender-btn input[type=radio] {
opacity: 1;
position: absolute;
top: -9999px;
}

.common-gender-btn input[type=radio] + label.male {
float: left;
font-size: 38px !important;
text-align: center;
color: #939597;
cursor: pointer;
margin-right: 15px;
display: inline-block;
}
.common-gender-btn input[type=radio][disabled] + label.male {
opacity: 0.4;
}
.common-gender-btn input[type=radio]:checked + label.male {
cursor: pointer;
color: #0c4f9f;
}
.common-gender-btn input[type=radio] + label.female {
float: left;
font-size: 38px !important;
color: #939597;
cursor: pointer;
margin-right: 15px;
display: inline-block;
text-align: center;
}
.common-gender-btn input[type=radio][disabled] + label.female {
opacity: 0.4;
}
.common-gender-btn input[type=radio]:checked + label.female {
cursor: pointer;
color: #0c4f9f;
}

2

I’m probably bypassing your problem but you could try adding a click/tap event together with [(ngModule)] to make sure the clicks are registered and you can process data however you want.