Fatal编程技术网
  • css/
  • css输入[type=radio]赢得'；I don’我在IE11上做得不好

css输入[type=radio]赢得'；I don’我在IE11上做得不好

css google-chrome

css输入[type=radio]赢得'；I don’我在IE11上做得不好,css,google-chrome,radio-button,internet-explorer-11,Css,Google Chrome,Radio Button,Internet Explorer 11,我有一个定制的单选按钮，绿色的。 在chrome和IE11上，除了颜色之外，其他一切都很好。在chrome上，颜色按计划为绿色，而在IE11上，颜色为黑色 我在这里附上了css和HTML。 这是我的HTML： <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12"> <span class=&quo

我有一个定制的单选按钮，绿色的。 在chrome和IE11上，除了颜色之外，其他一切都很好。在chrome上，颜色按计划为绿色，而在IE11上，颜色为黑色

我在这里附上了css和HTML。 这是我的HTML：

                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
                            <span class="formText">Kitzva</span>
                            <input id="radioKitzva" type="radio" />

                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
                            <span class="formText">Itra</span>
                            <input id="radioItra" type="radio" />
                            <asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />

                        </div>
附打印屏幕： IE11:， 铬：

非常感谢您的支持。

IE不支持外观，不带前缀也不带前缀。看

从IE 7.0开始支持属性选择器。看

编辑：我建议您将
[type=radio]
更改为
[type=“radio”]
。两者都可以，但后者更符合标准。

要对IE 11浏览器中的单选按钮应用类似效果，我建议您在上述代码中添加下面的CSS代码

input[type="radio"]:checked::-ms-check 
{
        border: 6px solid #008053;
        color: white;
}
完整修改代码：

<!doctype html>
<html>
   <head>
      <title>demo</title>
      <style>
         /*EDIT RADIO BUTTONS*/
         /* When the radio button is checked, add a green background */
         input[type=radio] {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         border-radius: 50%;
         width: 16px;
         height: 16px;
         border: 2px solid #999;
         transition: 0.2s all linear;
         margin-right: 5px;
         position: relative;
         top: 4px;
         }
         input[type="radio"]:checked {
         border: 6px solid #008053;
         }
         input[type="radio"]:checked::-ms-check {
         border: 6px solid #008053;
         color: white;
         }
         input[type="radio"]:focus {
         outline: 0px;
         }
      </style>
   </head>
   <body>
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
         <span class="formText">Kitzva</span>
         <input id="radioKitzva" type="radio" />
      </div>
      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
         <span class="formText">Itra</span>
         <input id="radioItra" type="radio" />
         <asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />
      </div>
   </body>
</html>


演示
/*编辑单选按钮*/
/*选中单选按钮后，添加绿色背景*/
输入[类型=收音机]{
-webkit外观：无；
-moz外观：无；
外观：无；
边界半径：50%；
宽度：16px；
高度：16px；
边框：2个实心#999；
过渡：0.2s全线性；
右边距：5px；
位置：相对位置；
顶部：4px；
}
输入[type=“radio”]：选中{
边框：6px实心#008053；
}
输入[type=“radio”]：已检查：-毫秒检查{
边框：6px实心#008053；
颜色：白色；
}
输入[type=“radio”]：焦点{
大纲：0px；
}
基茨瓦
伊特拉



此外，您可以尝试根据自己的要求修改代码。
Thamks，因此我从您的回答中了解到，没有办法使用相同的css（或编辑几行）使其在IE11和Chrome中工作相同？正确。IE只是没有好的输入样式选项。不过我怀疑这是否重要，如果这个网站在IE上看起来有点难看也没关系，因为没有人再使用它了。

<!doctype html>
<html>
   <head>
      <title>demo</title>
      <style>
         /*EDIT RADIO BUTTONS*/
         /* When the radio button is checked, add a green background */
         input[type=radio] {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         border-radius: 50%;
         width: 16px;
         height: 16px;
         border: 2px solid #999;
         transition: 0.2s all linear;
         margin-right: 5px;
         position: relative;
         top: 4px;
         }
         input[type="radio"]:checked {
         border: 6px solid #008053;
         }
         input[type="radio"]:checked::-ms-check {
         border: 6px solid #008053;
         color: white;
         }
         input[type="radio"]:focus {
         outline: 0px;
         }
      </style>
   </head>
   <body>
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
         <span class="formText">Kitzva</span>
         <input id="radioKitzva" type="radio" />
      </div>
      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
         <span class="formText">Itra</span>
         <input id="radioItra" type="radio" />
         <asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />
      </div>
   </body>
</html>