html - 具有自定义背景图像的单选按钮在 Internet Explorer 中变黑

Question

我需要在我的网站上呈现具有特定背景图像的单选按钮: not checked, checked

我通过为单选按钮元素添加以下样式解决了这个问题:

{
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  background-image: url(/Images/notChackedRadioButton.png);
  background-repeat: no-repeat;
}

一切都很好，但是当我在 Internet Explorer 中打开我的站点时，我看到了 all radiobuttons became black .似乎 IE 在我的背景图片上方添​​加了自己的图片，但我不知道如何解决这个问题。拜托，任何建议都会有所帮助。

Answer 1

不知道此处的其余代码是您可以做到这一点的一个示例。适用于 IE 11 和 IE Edge。在 codepen 上找到示例的其余部分 - https://codepen.io/tutsplus/pen/bgqYJz

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


input[type="radio"] + label span {
  display:inline-block;
  width:19px;
  height:19px;
  margin:-2px 10px 0 0;
  vertical-align:middle;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
  cursor:pointer;
}

input[type="radio"]:checked + label span {
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}

      <input type="radio" id="r1" name="rr" />
      <label for="r1"><span></span>Radio Button 1</label>
      <p>
      <input type="radio" id="r2" name="rr" />
      <label for="r2"><span></span>Radio Button 2</label>