html5中表单的几个新样式

最新推荐文章于 2024-07-31 18:14:15 发布

输出是最好的学习

最新推荐文章于 2024-07-31 18:14:15 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： html5 表单 required valid

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/75043096

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

在表单验证的时候，对于必填内容和选填内容，我们可以单独设置新的样式来控制，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*required是必填内容，optional是选填内容,如果不填写optional和required关键字，那么就默认为optional*/
		input:required{
			background: red;
		}
		input:optional{
			background: blue;
		}
		/*invalid就是不符合规则的，valid则是符合规则的*/
		input:required:invalid{
			background: yellow;
		}
	</style>
</head>
<body>
	<form action="#">
		<input type="text" required pattern="[A-Z]{4}">
		<input type="text" optional>
	</form>
</body>
</html>

具体说明写在注释中

输出是最好的学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5中表单的几个新样式

在表单验证的时候，对于必填内容和选填内容，我们可以单独设置新的样式来控制，代码如下： Document /*required是必填内容，optional是选填内容,如果不填写optional和required关键字，那么就默认为optional*/ input:required{ background: red; } input:optional{
复制链接

扫一扫

专栏目录