css input[type=radio] 在 IE 11 上无法正常工作

Question

我有一个定制的绿色单选按钮。在 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>

css:

    /*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"]:focus {
        outline: 0px;
    }

附加打印屏幕： IE11：IE11 - checked , IE11 - not checked Chrome: Chrome - checked , Chrome - not checked

感谢支持

Answer 1

IE 不支持外观，不支持前缀也不支持。参见 here。

从 IE 7.0 开始支持属性选择器。参见 here。

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

Answer 2

要在 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>

在 IE 11 浏览器中的输出：

另外，您可以根据自己的需求尝试修改代码。

css input[type=radio] 在 IE 11 上无法正常工作

css input[type=radio] won't work well on IE 11

css

google-chrome

radio-button

internet-explorer-11