文章目录
美化表单元素
新的伪类
- focus：元素聚焦时的样式
<!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：单选或多选框被选中的样式
<!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）
- 控制单选和多选的样式
