input输入框对伪类（after，before）支持情况

最新推荐文章于 2024-05-25 20:43:42 发布

_Mingo

最新推荐文章于 2024-05-25 20:43:42 发布

阅读量1.1w

点赞数 9

分类专栏： html 文章标签： input

本文链接：https://blog.csdn.net/qq_41359066/article/details/100601426

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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’ 。

_Mingo

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
input输入框对伪类（after，before）支持情况

input 对伪元素(:before :after)的支持情况伪类是个很便捷的元素，今天写东西的时候，突然发现没效果，后来发现input对伪类也有不支持的，记录一下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫

专栏目录