CSS 表单美化
input/textarea/select 样式化、focus 聚焦效果、表单布局
CSS 表单美化
CSS 可以彻底改变表单的外观——从"浏览器默认"到"品牌一致"。
学完本章你将： 掌握 input/textarea/select 样式、focus 效果、表单布局。
基本美化
css
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border 0.3s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76,175,80,0.2);
}表单布局
css
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}html
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name">
</div>自定义复选框/单选框
css
/* 隐藏原生控件，用 label::before 模拟 */
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label::before {
content: "☐";
margin-right: 5px;
}
input[type="checkbox"]:checked + label::before {
content: "☑";
color: #4CAF50;
}