IE单选按钮隐藏不起作用

这段代码在Chrome中工作，但默认的单选按钮在IE中显示在样式上。IE单选按钮隐藏不起作用

在IE中，单选按钮没有隐藏起来。这是代码。

input[type=radio] { 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    width: 15px !important; 
 
    height: 15px !important; 
 
    border: 3px solid #999999 !important; 
 
    border-radius: 50% !important; 
 
    outline: none !important; 
 
} 
 
input[type=radio]:hover { 
 

 
} 
 
input[type=radio]:before { 
 
    content: '' !important; 
 
    display: block !important; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    margin: 0 auto !important; 
 
    border-radius: 50% !important; 
 
} 
 
input[type=radio]:checked:before { 
 
    background: #005eb8 !important; 
 
}

<input type="radio" id="a"/>No 1

来源

2016-07-26 Nirmal Krishna

你不能像'input'，仍然，Chrome并使其单标签元素使用伪元素，IE不 – LGSon

不要设计单选按钮本身，因为有些浏览器不支持。使用一些更多的标记来定制无线电或检查按钮。很好的例子 - https://codepen.io/mitchmc/pen/pebIx – 3rdthemagical

我可以在你的IE版本中知道吗？ IE老bowers不支持伪元素。 http://caniuse.com/#feat=css-gencontent http://stackoverflow.com/questions/7157405/are-css3-before-and-after-pseudo-elements-supported-by-ie9-or-不是 –

-1

与代码的问题是它使用伪的input元素。

伪元素不应该单标签元素上工作，像input，img等，虽然铬让它反正

如果设置在label而不是伪，它会工作的跨浏览器

div { 
 
    padding: 5px 0; 
 
} 
 
input[type="radio"] { 
 
    display: none; 
 
} 
 
input[type="radio"] + label::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 14px; 
 
    height: 14px; 
 
    margin: 0 8px -2px 0; 
 
    cursor: pointer; 
 
    border-radius: 50%; 
 
    border: 1px solid gray; 
 
} 
 
input[type="radio"]:checked + label::before { 
 
    background: #005eb8; 
 
}

<div> 
 
    <input type="radio" id="r1" name="rd"> 
 
    <label for="r1">Button 1</label> 
 
</div> 
 
<div> 
 
    <input type="radio" id="r2" name="rd"> 
 
    <label for="r2">Button 2</label> 
 
</div>

来源

2016-07-26 09:47:20 LGSon

谢谢LGSon –

Downvoter，谨慎地评论为什么，在一个完整的工作代码片段？ – LGSon

-1

保持简单。

使用默认（浏览器应用）风格
使用自定义的无线电元件（需要额外的标记，JS等）

Tympanus为您提供美丽的例子。他们使用“标签”和伪元素来创建漂亮的自定义单选按钮。

来源

2016-07-26 09:27:41 karlisup

有人可以解释我，请问为什么这个答案是投票结果？ – karlisup

很可能是因为您链接到工具而不是提供工作示例/代码段。尽管如此，我在答案中这样做，并得到了低估，所以有些用户只是这样做，没有任何解释。 – LGSon

我喜欢你的解决方案。我想下一次，而不是建议的事情，我应该只是按照你的建议，只是回答q和提供代码片段;）。谢谢你的建议！ – karlisup

IE单选按钮隐藏不起作用

回答

相关问题