CSS - 伪类 :required

CSS 伪类 :required 选择具有 required 属性的表单元素。

此属性使元素成为必填字段，这意味着用户必须先为其输入值，然后才能提交表单。

语法


:required {
	 	/* ... */
}

CSS 伪类 :required 示例

以下示例演示了带有必填字段的简单登录表单，以便用户知道他们需要输入哪些信息才能提交表单 -


<html>
<head>
<style>
	 	.form-container {
	 	 	 width: 300px;
	 	 	 margin: 0 auto;
	 	}
	 	input:required:invalid {
	 	 	 border: 2px solid red;
	 	}
	 	label {
	 	 	 display: block;
	 	 	 margin-top: 10px;
	 	}
	 	.submit-conatiner {
	 	 	 margin-top: 10px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 10px;
	 	 	 border: none;
	 	}
</style>
</head>
<body>
	 	<div class="form-container">
	 	 	 <form>
	 	 	 <label for="name">Name:</label>
	 	 	 <input type="text" id="name" name="name" >

	 	 	 <label for="email">Email:</label>
	 	 	 <input type="email" id="email" name="email" >

	 	 	 <label for="password">Password:</label>
	 	 	 <input type="password" id="password" name="password" required>

	 	 	 <div class="submit-conatiner"><button type="submit">Submit</div>
	 	 	 </form>
	 	</div>
</body>
</html>

打印本页