伪类不在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屏幕截图：

Chrome屏幕截图：

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屏幕截图：

Chrome屏幕截图：

以下是我正在使用的代码

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

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

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

Answer 1

尝试这种东西是个不错的主意。 但是如果你真的想要覆盖这个基本语句，最好的方法是使用div和特定类构建你的单选按钮，并使用jQuery或javascript来设置你的表单。 example

Answer 2

您使用的是非标准appearance媒体资源，但该资源恰好受Chrome支持，但不支持IE。像::-ms-expand和::-ms-check这样的伪元素只能在IE 10 +中使用。

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