Html 自定义单选按钮背景色在internet explorer上不起作用_Html_Css

Html 自定义单选按钮背景色在internet explorer上不起作用

html css

Html 自定义单选按钮背景色在internet explorer上不起作用,html,css,Html,Css,我有自定义单选按钮，如： https://screenshots.firefox.com/SIa4ExZ50mcwP2Wd/localhost 通过此代码 <!DOCTYPE html> <html> <style type="text/css"> .seco { -webkit-appearance: none; -moz-appearance: none; appearance: none;

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

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>


塞科先生{
-webkit外观：无；
-moz外观：无；
外观：无；
边界半径：50%；
宽度：16px；
高度：16px；
边框：2个实心#999；
过渡：0.2s全线性；
大纲：无；
右边距：5px；
位置：相对位置；
顶部：4px；
}
塞科先生：检查过了{
边框：3倍纯黑；
背景：1df01d；
}
布基纳法索{
-webkit外观：无；
-moz外观：无；
外观：无；
边界半径：50%；
宽度：16px；
高度：16px；
边框：2个实心#999；
过渡：0.2s全线性；
大纲：无；
右边距：5px；
位置：相对位置；
顶部：4px；
}
.法索：核对{
边框：3倍纯黑；
背景：红色；
}

但在我的例子中，它和mozila、chrome和safari配合得很好，但它不适用于internet explorer。为什么会发生这种事？我不是能够理解是否有任何简单的方法可以使用 internet explorer（ie）。请帮我从明天起把这件事告诉我坚持这一点……”

在internet explorer中，它现在在背景上显示颜色，但与chrome和mozila配合得很好。

秘密在于，在internet explorer中，选中的

：为
的外部设置样式，而你看不到。要更改检查本身，您需要查找：：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外观：无；
-moz外观：无；
外观：无；
边界半径：50%；
宽度：16px；
高度：16px；
边框：2个实心#999；
过渡：0.2s全线性；
大纲：无；
右边距：5px；
位置：相对位置；
顶部：4px；
}
是的，检查过了{
边框：3倍纯黑；
背景：1df01d；
}
英格诺先生{
-webkit外观：无；
-moz外观：无；
外观：无；
边界半径：50%；
宽度：16px；
高度：16px；
边框：2个实心#999；
过渡：0.2s全线性；
大纲：无；
右边距：5px；
位置：相对位置；
顶部：4px；
}
.engno:检查过了{
边框：3倍纯黑；
背景：红色；
}
.engyes:选中：-ms check{
边框：3倍纯黑；
背景：1df01d；
}
.engno:已检查：-ms检查{
边框：3倍纯黑；
背景：红色；
}



您的方法不是跨浏览器的。尝试以下方法，这里注意2个重要问题集<代码>用于

输入值<代码>id，标签必须紧跟在相应的
无线电按钮之后。现在我把它们作为占位符。管理收音机{ 位置：绝对位置；不透明度：0； z指数：-1； } .风格收音机{ 显示：内联块；垂直对齐：顶部；宽度：16px；高度：16px；框大小：边框框；边框：2px实心#ddd；背景色：#fff；边界半径：50%； } .管理收音机：选中+.样式收音机{ 边框：3倍实心#000；背景色：#1df01d； } 工作正常，但internet explorer中显示了收音机内部的圆点。。我怎样才能从收音机中删除那个点…有什么办法可以删除internet Explorer中的那个点吗？？