CSS3学习笔记-03-表单伪类验证
程序员文章站
2024-03-25 17:03:04
...
文章目录
一、input:disabled 禁用的
<style>
input:disabled{
background-color: teal;
}
</style>
<body>
<input type="text" disabled>
</body>
效果：
二、input:enabled 启用的
<style>
input:optional{
background-color: green;
}
</style>
<body>
<input type="text" value="启用的">
</body>
效果:
三、input:checked+label 选中的
<style>
input:checked+label{
color: green;
}
</style>
<body>
<input type="radio" name="sex" id='boy' checked value="男">
<label for="boy">男</label>
<input type="radio" name="sex" id="girl" value="女">
<label for="girl">女</label>
</body>
效果：
四、input:required 必填项
<style>
input:required{
background-color: red;
}
</style>
<body>
<input type="text" required>
</body>
效果：
五、input:optional 非必填项
<style>
input:optional{
background-color: pink;
}
</style>
<body>
<input type="text">
</body>
效果：
六、input:valid 输入值有效的样式
<style>
input:valid{
background-color:seagreen;
}
</style>
<body>
<input type="text" required>
</body>
效果：
七、input:invalid 输入值无效的样式
<style>
input:valid{
background-color:seagreen;
}
input:invalid{
background-color:rgb(139, 39, 39);
}
</style>
<body>
<input type="text" required>
</body>
效果:
八、总览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单属性的操作</title>
<style>
input{
/* 去掉外边线 */
/* outline: none; */
}
/* 禁用的样式 */
input:disabled{
border: 1px solid #ddd !important;
}
/* 启用的 */
input:enabled{
background-color: teal;
}
/* 选中的样式的兄弟标签 */
input:checked+label{
color:teal;
}
/* 必填项 */
input:required{
border: 1px solid red;
background-color: teal;
}
/* 非必填项 */
input:optional{
border: 1px solid green;
}
/* 输入的值有效的样式设置 */
input:valid{
background-color: yellowgreen;
}
/* 输入的值无效的样式 */
input:invalid{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<form action="">
<input type="text" disabled>
<input type="text">
<hr>
<input type="radio" name="sex" id='boy' checked value="男">
<label for="boy">男
</label>
<input type="radio" name="sex" id="girl" value="女">
<label for="girl">女
</label>
<hr>
<input type="text" required>
<hr>
邮箱
<input type="email">
<button>保存</button>
</form>
</body>
</html>
上一篇： RESTful API 设计风格