Question

我有自定义单选按钮，如：

https://screenshots.firefox.com/SIa4ExZ50mcwP2Wd/localhost

通过此代码

  <!DOCTYPE html>
<html>
<style type="text/css">
    .seco {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        border-radius: 50%;
        width: 16px;
        height: 16px;

        border: 2px solid #999;
        transition: 0.2s all linear;
        outline: none;
        margin-right: 5px;

        position: relative;
        top: 4px;
    }

    .seco:checked {
        border: 3px solid black;
        background: #1df01d;
    }

    .faso {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        border-radius: 50%;
        width: 16px;
        height: 16px;

        border: 2px solid #999;
        transition: 0.2s all linear;
        outline: none;
        margin-right: 5px;

        position: relative;
        top: 4px;
    }

    .faso:checked {
        border: 3px solid black;
        background: red;
    }
</style>
<body>

      <div class="col-md-12 col-xs-12 " >
      <div class="col-md-10" >
      <div class="col-md-4 col-xs-4 no-padding" >
      <p class="skill_eng"></p>
      </div>
      <div class="col-md-4 col-xs-4 no-padding"  >
      <div class="col-md-12 col-xs-12 no-padding"  >
      <div class="col-md-6 col-xs-6 "  >
      <input type="radio" checked="checked" class="faso" >
      </div>
      <div class="col-md-6 col-xs-6 skill_radio" >
      <input type="radio" class="seco">
      </div> 
      </div>
      </div>
      <div class="col-md-4 col-xs-4 no-padding" >
      <p ></p>
      </div>
      </div>
      </div>

</body>
</html>

但在我的情况下，它与mozila，chrome和safari一起工作正常但是它不与Internet Explorer合作。为什么会发生这种情况我不是能够理解是否有任何简单的方法来运行此代码互联网浏览器（即）。请明天我帮我解决这个问题坚持这个....'

在互联网资源管理器中，它现在显示背景颜色，但与铬和mozila工作正常..

Answer 1

秘诀在于，在Internet Explorer中，:checked样式为<input>的外部，您看不到它们。为了更改检查本身，您正在寻找::ms-check伪类，应用以下规则专门针对Internet Explorer：

.engyes:checked::-ms-check {
  border: 3px solid black;
  background: #1df01d;
}

.engno:checked::-ms-check {
  border: 3px solid black;
  background: red;
}

这可以在以下内容中看到：

.engyes {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;
  position: relative;
  top: 4px;
}

.engyes:checked {
  border: 3px solid black;
  background: #1df01d;
}

.engno {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;
  position: relative;
  top: 4px;
}

.engno:checked {
  border: 3px solid black;
  background: red;
}

.engyes:checked::-ms-check {
  border: 3px solid black;
  background: #1df01d;
}

.engno:checked::-ms-check {
  border: 3px solid black;
  background: red;
}

<body>
  <div class="col-md-12 col-xs-12 no-padding skill-main">
    <div class="col-md-10 col-md-offset-1 col-xs-12 no-padding skill-inside">
      <div class="col-md-4 col-xs-4 no-padding">
        <p class="skill_eng" style="text-align:center;"></p>
      </div>
      <div class="col-md-4 col-xs-4 no-padding">
        <div class="col-md-12 col-xs-12 no-padding">
          <div class="col-md-6 col-xs-6 no-padding skill_radio">
            <input type="radio" checked="checked" id="engno'+val.id+'" name="eradios['+val.id+']" value="0" data-for="no" class="radio-design engno">
          </div>
          <div class="col-md-6 col-xs-6 skill_radio">
            <input type="radio" id="engyes'+val.id+'" name="eradios['+val.id+']" value="'+val.id+'" data-for="yes" class="radio-design engyes">
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-4 no-padding">
        <p class="skill_arb" style="text-align:center;"></p>
      </div>
    </div>
  </div>

</body>

Answer 2

您的方法不是跨浏览器。请尝试以下方式，此处注意2重要问题集for值输入您的输入id，并且必须在相应的radio buttton后立即标记。现在我把它们作为占位符

.manage-radio {
	position: absolute;
    opacity: 0;
	z-index: -1;
}
.style-radio {
	display:inline-block;
	vertical-align:top;
	width:16px;
	height:16px;
	box-sizing: border-box;
	border: 2px solid #ddd;
	background-color:#fff;
	border-radius: 50%;
}
.manage-radio:checked + .style-radio {
    border: 3px solid #000;
	background-color:#1df01d;
}

<div class="col-md-6 col-xs-6 ">
	<input type="radio" id="id1" class="radio-design engyes manage-radio">
    <label class="style-radio" for="id1"></label>
</div>
<div class="col-md-6 col-xs-6 skill_radio">
	<input type="radio" id="id2" class="radio-design engyes manage-radio">
    <label class="style-radio" for="id2"></label>
</div>

自定义单选按钮背景颜色不适用于Internet Explorer

2 个答案: