版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
input 对伪元素(:before :after)的支持情况
伪类是个很便捷的元素，今天写东西的时候，突然发现没效果，后来发现input对伪类也有不支持的，记录一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input:before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: #000;
}
input:after {
content: "";
display: block;
width: 15px;
height: 15px;
background-color: #f00;
}
div{
padding: 10px 0;
}
</style>
</head>
<body>
<div>button <input type="button"></div>
<div>color <input type="color"></div>
<div>date <input type="date"></div>
<div>datetime-local <input type="datetime-local"></div>
<div>email <input type="email"></div>
<div>file <input type="file"></div>
<div>hidden <input type="hidden"></div>
<div>image <input type="image"></div>
<div>month <input type="month"></div>
<div>number <input type="number"></div>
<div>passwork <input type="password"></div>
<div>range <input type="range"></div>
<div>reset <input type="reset"></div>
<div>search <input type="search"></div>
<div>submit <input type="submit"></div>
<div>text <input type="text"></div>
<div>tel <input type="tel"></div>
<div>time <input type="time"></div>
<div>number <input type="number"></div>
<div>url <input type="url"></div>
<div>week <input type="week"></div>
<div>datetime <input type="datetime"></div>
<div>checkbox <input type="checkbox"></div>
<div>radio <input type="radio"></div>
</body>
</html>
after 的颜色是红色 #f00
before 的颜色是黑色 #000
再来看一下效果，在Windows chorme 打开
我们可以看到很多类型的input都不支持伪类，buttom 、 number 、text 、 email 等等。
Chore保存网页
注：本文只针对Chrome浏览器。
打开 Chrome 浏览器，找到需要截图的页面
在该页面右键，选择检查（F12）;
打开命令行：‘Ctrl’+‘Shift’+‘P’（Windows），‘Alt’+‘Command’+‘I’（Mac）；
命令行输入Screen，在模糊匹配的列表里面选择 ‘Capture full size screenshot’ 。