html - 伪类不适用于 select 和 radio 元素

Question

我有一个在 Chrome 中运行良好的网站，但在“IE”中它会中断。

两个元素正在破坏：

**1。**单选按钮：**** 这是代码

 input[type='radio'] {
width: 100%;
height: 42px;
padding-top: 12px;
display: block;
float: left;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #000;
background-image: url(btn-toggle-up.gif);
background-repeat: repeat-x;
}

IE 截图：

铬截图：

2.选择元素： 这是代码

select {
height: 42px;
padding-left: 10px;
display: block;
border: none;
box-shadow: none;
vertical-align: middle;
line-height: 42px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-image: url(select-arrow.gif);
background-repeat: no-repeat;
background-position: right;
}

IE 截图：

铬截图：

这是我正在使用的代码

select::-ms-expand{display:none;}
::-ms-check{display:none;}

经过一番研究，我找到了解决这两个问题的最合适的解决方案之一。但似乎我无法让它在我的元素上工作，但错误仍然存​​在。

我已经在 IE7 和 IE8 中对此进行了测试。

Answer 1

您正在使用非标准appearance属性，Chrome 恰好支持，但 IE 不支持。伪元素喜欢::-ms-expand并且::-ms-check只能在 IE 10+ 中使用。

众所周知，表单控件很难设置样式，因此如果您想要一致的跨浏览器外观，请使用jQuery UI等 UI 库或重新考虑与您的设计器一起设置表单控件的样式。

Answer 2

尝试这种东西是一个非常糟糕的主意。但是如果你真的想覆盖这个基本语句，最好的方法是用 div 和特定的类来构造你的单选按钮，并使用 jQuery 或 javascript 来设置你的表单。例子。