美化表单元素
文章目录
新的伪类
- focus 元素聚焦样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus{
outline: 3px solid #008c8c;
outline-offset: none;
color: red;
}
input{
color: blue;
}
</style>
</head>
<body>
<p>
<a tabindex="2" href="http://www.baidu.com">lorem</a>
</p>
<p>
<input type="text" tabindex="1">
</p>
<p>
<button tabindex="3">提交</button>
</p>
</body>
</html>
- checked
单选或多选选中的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:checked+label{
/* 选中的单选框的下一个兄弟元素 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>
常见用法
- 重置表单元素样式
input,textarea,button,select{
border: none;
}
input:focus,
textarea:focus,
button:focus,
select:focus{
outline: none;
outline-offset: 0;
}
-
设置textarea是否允许调整尺寸
resize :both(两边都可调) none …
horizontal 水平方向
vertical 垂直方向 -
文本框边缘到文字距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 方式一 padding */
input{
padding-left: 10px;
}
/* 方式二 text-indent 不能设置两边 */
textarea{
text-indent: 1em;
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
- 控制单选，多选的样式
制作好看的单选框(important)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.radio-item .radio{
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #999;
border-radius: 50%;
cursor: pointer;
}
.radio-item input:checked+.radio{
border-color: #008c8c;
}
.radio-item input:checked~span{
color: #008c8c;
}
.radio-item input:checked+.radio::after{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #008c8c;
margin-top: 3.5px;
margin-left: 3.5px;
border-radius: 50%;
}
.radio-item input[type="radio"]{
display: none;
/* 隐藏最初单选框 */
}
</style>
</head>
<body>
<p>
选择:
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>女</span>
</label>
</p>
</body>
</html>