Issue with radio buttons in Internet ExplorerWhen creating radio buttons in ASP.NET using Bootstrap, I encountered a problem with them being disabled. While they appeared disabled on Chrome, Internet Explorer displayed a gray square around the buttons. To solve this issue in IE, I had to wrap the input tag with a div disabled tag. However, this solution did not work in Chrome, causing one browser to display correctly while ruining the appearance in the other. The code provided below is the working version for Chrome.
input[disabled] {
cursor: not-allowed;
background-color: #cfcfcf;
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
<div class="form-check">
<input disabled="disabled" checked="checked" class="form-check-input" id="Male" name="GenderSelection" type="radio" value="Y">
</div>
<label for="Male">Male</label>