老师帮我看一下为什么以下代码IE和火狐不生效，360和chrome opera是没问题的。
来源：2-20 UI元素状态伪类
qq_慕哥7528512
2019-07-28 18:46:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3修改单选多选框样式</title>
<style>
input[type='radio']:before{
z-index:9999;
content: "\A0";
display:inline-block;
width: 16px;
height: 16px;
border-radius: 16px;
background-color: #ffffff;
line-height: 16px;
border:1px solid #e9e9e9;
margin-top: -3px;
margin-left: -5px;
}
input[type='radio']:checked::before{
content: "\2713";
display: inline-block;
color: #557cf4;
width: 16px;
height: 16px;
font-weight:bold;
text-align:center;
}
input[type='checkbox']:before{
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 16px;
height: 16px;
border-radius: 1px;
background-color: #ffffff;
line-height: 18px;
border:1px solid #e9e9e9;
margin-top: -3px;
margin-left: -5px;
}
input[type='checkbox']:checked::before{
content: "\2713";
display: inline-block;
color: #557cf4;
width: 16px;
height: 16px;
font-weight:bold;
text-align:center;
</style>
</head>
<body>
<input type="radio" name="fruits">苹果
<input type="radio" name="fruits">香蕉
<input type="checkbox" name="fruits">苹果
<input type="checkbox" name="fruits">香蕉
</body>
</html>我按照网上文章和慕课课程所学的做了一个用css3美化单选和多选框，但是实际运行效果IE11和火狐不生效。
360 chrome opera可以正常显示，before和after不是说ie8+就支持吗？能不能帮我看看是哪里不对呢 谢谢
3回答
-
好帮手慕糖
2019-07-29
同学你好，1、因为input标签为自闭合标签（就是单标签），所以无法使用伪类。但是在webkit内核浏览器（Chrome，Safari，Opera）中能够正常显示，其它浏览器都没有效果。
2、因为加了伪元素之后，解析的时候伪元素会被嵌入到input元素中，input也不再是自闭合的了，如下这样：
<input> ::before </input>
希望能帮助到你，祝学习愉快！
0 -
qq_慕哥7528512
提问者
2019-07-29
最终网上查到结果，input标签是不能用伪元素的。至于chrome内核的浏览器为什么生效是个谜
0 -
一路电光带火花
2019-07-28
我使用老师课上讲的这两个是可以的呀，你试下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li{padding:3px;}
input[type="text"]:enabled{border:1px solid #090;background:#fff;color:#000;}
input[type="text"]:disabled{border:1px solid #ccc;background:#eee;color:#ccc;}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>enabled与disabled</legend>
<ul>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
</ul>
</fieldset>
</form>
</body>
</html>
0h019-07-28
相似问题