Question

我需要在我的网站上使用特定背景图像渲染radiobuttons： not checked ，checked

我通过为radiobutton元素添加以下样式来解决这个问题：

{
  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>

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

1 个答案: