单选按钮图像在 Internet Explorer Edge 中无法正常工作

Question

在 IE Edge 单选按钮中单击标签文本 (Male/female) 时获得 checked/unchecked，但当我单击与 male/female 相邻的图像时却没有。在其他浏览器中，当我单击图像和文本 (Male/Female).

时，单选按钮会得到 checked/unchecked

Html:

<div class="form-group clearfix">
<div class="pull-left formQuestions"><p>Which gender do you identify with?</p></div>
<div class="pull-left individualAnswer">
<div class="clearfix">
<div class="pull-left optionOne">
<input type="radio" name="gender"  id="male" class="input-hidden" ng-model="genderSelect" ng-value = "'male'" ng-change = "genderSelection(genderSelect)" required/>
<label for="male" class="radioLabel">
 <img class="radioPic" ng-src={{imgPathMale}} /> Male 
</label>
</div>
<div class="pull-left">
<input type="radio" name="gender" id="female" class="input-hidden" ng-model="genderSelect" ng-value = "'female'" ng-change = "genderSelection(genderSelect)" required/>
<label for="female" class="radioLabel"> <img class="radioPic" ng-src={{imgPathFemale}} />Female                           
</label>
</div>
</div>
</div>
</div>

CSS:

.input-hidden{
 visibility: hidden;
 position: absolute;
 }

Js：

$scope.genderSelection = function(gender){

  if(gender == 'male'){
  $scope.imgPathMale = "assets/images/form_radio_selected.png";
  $scope.imgPathFemale = "assets/images/form_radio_unselected.png";
  }
  else{
  $scope.imgPathFemale = "assets/images/form_radio_selected.png";
  $scope.imgPathMale = "assets/images/form_radio_unselected.png";   
  }
 }

Answer 1

label{
   display:inline-block;
}
label img{
 pointer-events: none;
 -moz-user-select: -moz-none; // to remove blue color highlight in which we 
   //get on clicking image in firefox.
}