美化表单元素
新的伪类
- focus:元素聚焦时的样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/5f2aa694bef347869edd80290afd9e05.png)
<!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{
color: #999;
}
input:focus {
outline: 1px solid #008c8c;
outline-offset: 0;
color: #000;
}
</style>
</head>
<body>
<p>
<a tabindex="2" href="https://www.baidu.com">百度</a>
</p>
<p>
<input tabindex="1" type="text">
</p>
<p>
<button tabindex="3">提交</button>
</p>
</body>
</html>
- checked:单选或多选框被选中的样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/5d051c2d6c244fe6afc1f4acabbba1fe.png)
<!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:checked+label {
color: red;
}
</style>
</head>
<body>
<p>
<input id="radmale" name="gender" type="radio">
<label for="radmale">男</label>
<input id="radfemale" name="gender" type="radio">
<label for="radfemale">女</label>
</p>
</body>
</html>
常见用法
- 重置表单元素样式
- 设置textarea是否允许调整尺寸(resize)
css属性resize:
- both:默认值,两个方向都可以调整尺寸
- none:不能调整尺寸
- horizontal: 水平方向可以调整尺寸
- vertical:垂直方向可以调整尺寸
- 文本框边缘到内容的距离(padding,text-indent)
- 控制单选和多选的样式