美化表单元素
新的伪类
- focus
元素聚焦时的样式
css
input {
color: #999;
}
input:focus {
outline: 1px solid #008c8c;
outline-offset: 0;
color: #000;
}
- checked 单选或多选框被选中的样式 单选和勾选框的选中状态几乎很少改变,我们一般使用 checked 伪类来自己实现单选框。
css
:checked {
background-color: red;
}
html
<p>
<input id="radmale" name="gender" type="radio" />
<label for="radmale">男</label>
<input id="radfemale" name="gender" type="radio" />
<label for="radfemale">女</label>
</p>
css
input:checked + label {
color: red;
}
- :placeholder
css
::placeholder {
color: #ccc;
}
- :disabled
css
:disabled {
background-color: #eee;
cursor: not-allowed;
}
常见用法
重置表单元素样式
设置 textarea 是否允许调整尺寸
css 属性 resize:
- both:默认值,两个方向都可以调整尺寸
- none:不能调整尺寸
- horizontal: 水平方向可以调整尺寸
- vertical:垂直方向可以调整尺寸
css
textarea {
resize: horizontal;
}
- 文本框边缘到内容的距离
css
/* 方式1:padding */
/* input {
padding:0 10px;
} */
/* 方式2:text-indent */
input,
textarea {
text-indent: 1em;
}
- 控制单选和多选的样式 写一个漂亮的单选框
html
<div class="radio checked"></div>
css
.radio {
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
}
.radio.checked {
border-color: #008c8c;
}
.radio.checked::after {
content: "";
display: block;
width: 5px;
height: 5px;
background: #008c8c;
margin-left: 3.5px;
margin-top: 3.5px;
border-radius: 50%;
}
最佳实践
重置浏览器表单元素样式
css
input[type="text"],
textarea,
select {
border: 1px solid #999;
}
input[type="text"]:focus,
textarea:focus,
select:focus {
border: 1px solid #008c8c;
}
button {
border: 2px solid #008c8c;
border-radius: 5px;
}
自定义漂亮的单选框
html
<!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>
.radio-item .radio {
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
.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: #008c8c;
margin-left: 3.5px;
margin-top: 3.5px;
border-radius: 50%;
}
.radio-item input[type="radio"] {
display: none;
}
</style>
</head>
<body>
<p>
请选择性别:
<label class="radio-item">
<input name="gender" type="radio" />
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input name="gender" type="radio" />
<span class="radio"></span>
<span>女</span>
</label>
</p>
</body>
</html>
技巧
场景: 表单一般需要表单验证,验证会有 tips 提示。 方案:
- 我们会将 tips 放置在 form-item 元素内
- 设置 tips 的 display: none;
- 我们将错误的一些样式用一个类来控制,这样出现错误的时候我们只需要用 js 去添加这个类即可。
html
<div class="form-item haserror">
<input type="text" placeholder="账号" />
<div class="error">该昵称已被他人使用</div>
</div>
css
.form-area .form-item .error {
position: absolute;
width: 240px;
right: -250px;
top: 10px;
color: #f45d90;
font-size: 12px;
display: none; //先设置隐藏
}
.form-area .form-item.haserror .error {
display: block; //添加haserror类后,error显示
}
.form-area .form-item.haserror input {
border-color: #f45d90; //同时可以设置haserror类 下input边框颜色为红色
}