美化表单元素
新的伪类选择器
- focus
元素聚焦时的样式,即搜索栏点中后的样式
- checked
单选或多选框被选中的样式
input:checked+label{
}
给被选中元素套上label,让后让label元素变色即可
<!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: blueviolet;
}
</style>
</head>
<body>
<p>
<input type="radio" id="a" name="a">
<label for="a">男</label>
<input type="radio" id="a" name="a">
<label for="a">女</label>
</p>
</body>
</html>
常见样式
- 重置表单元素样式
- 设置多行文本框是否允许调整尺寸
resize 属性
-both:两个方向都可以
-none:不能调整取值
-horizontal:水平方向可以调整尺寸
-vertical:垂直方向可以调整尺寸
- 文本框边缘到内容的距离
-text-indent:nem;n为要空的字符数
- 控制单选和多选的样式
样式自己制作,然后把它放到表单元素的每一个内容前(用label框柱这一部分),最后把display:none;隐藏input元素