HTML表单是网页中收集用户输入信息的重要组件，默认的表单控件样式由浏览器决定，往往比较简陋，和定制化设计的页面风格很难融合。通过CSS可以对表单的各个部分进行样式调整，实现符合设计需求的视觉效果。
表单整体布局优化
首先可以通过CSS调整表单的整体排列方式和间距，让表单结构更清晰。常见的布局方式是使用flex布局让表单元素垂直排列，同时设置合适的间距。
/* 表单整体样式 */
form {
display: flex;
flex-direction: column;
gap: 16px;
width: 400px;
margin: 0 auto;
padding: 24px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
输入框样式美化
默认的<input>、<textarea>等输入框样式比较单一，可以通过CSS调整边框、内边距、字体等属性，还可以添加聚焦状态的样式提升交互感。
/* 输入框通用样式 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
/* 输入框聚焦状态 */
input:focus,
textarea:focus {
outline: none;
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
按钮样式定制
表单的提交按钮是用户操作的核心元素，默认的按钮样式比较普通，可以通过CSS设计不同风格、不同状态的按钮样式。
/* 提交按钮样式 */
button[type="submit"] {
width: 100%;
padding: 12px 0;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 按钮悬停状态 */
button[type="submit"]:hover {
background-color: #337ecc;
}
/* 按钮禁用状态 */
button[type="submit"]:disabled {
background-color: #a0cfff;
cursor: not-allowed;
}
标签与提示文字优化
表单的<label>标签和提示文字也需要统一样式，保证和整体设计风格一致，同时提升文字的可读性。
/* 标签样式 */
label {
font-size: 14px;
color: #333;
margin-bottom: 4px;
display: block;
}
/* 提示文字样式 */
.form-tip {
font-size: 12px;
color: #999;
margin-top: 4px;
}
单选与复选框美化技巧
默认的单选框和复选框样式很难自定义，常见的做法是隐藏原生控件，用自定义的样式元素替代，通过:checked伪类控制选中状态。
/* 隐藏原生单选框 */
input[type="radio"] {
display: none;
}
/* 自定义单选框样式 */
.radio-label {
display: flex;
align-items: center;
cursor: pointer;
margin-right: 16px;
}
.radio-custom {
width: 16px;
height: 16px;
border: 1px solid #ddd;
border-radius: 50%;
margin-right: 8px;
position: relative;
transition: border-color 0.3s ease;
}
/* 选中状态样式 */
input[type="radio"]:checked + .radio-custom {
border-color: #409eff;
}
input[type="radio"]:checked + .radio-custom::after {
content: "";
width: 8px;
height: 8px;
background-color: #409eff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
完整示例演示
以下是一个完整的美化表单示例，结合了上述所有样式技巧，可以直接参考使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化表单示例</title>
<style>
form {
display: flex;
flex-direction: column;
gap: 16px;
width: 400px;
margin: 50px auto;
padding: 24px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
label {
font-size: 14px;
color: #333;
margin-bottom: 4px;
display: block;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
input:focus,
textarea:focus {
outline: none;
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.radio-group {
display: flex;
}
input[type="radio"] {
display: none;
}
.radio-label {
display: flex;
align-items: center;
cursor: pointer;
margin-right: 16px;
}
.radio-custom {
width: 16px;
height: 16px;
border: 1px solid #ddd;
border-radius: 50%;
margin-right: 8px;
position: relative;
transition: border-color 0.3s ease;
}
input[type="radio"]:checked + .radio-custom {
border-color: #409eff;
}
input[type="radio"]:checked + .radio-custom::after {
content: "";
width: 8px;
height: 8px;
background-color: #409eff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button[type="submit"] {
width: 100%;
padding: 12px 0;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #337ecc;
}
.form-tip {
font-size: 12px;
color: #999;
margin-top: 4px;
}
</style>
</head>
<body>
<form>
<div>
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div>
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="请输入邮箱">
<p class="form-tip">请输入有效的邮箱地址</p>
</div>
<div>
<label>性别</label>
<div class="radio-group">
<label class="radio-label">
<input type="radio" name="gender" value="male">
<span class="radio-custom"></span>
男
</label>
<label class="radio-label">
<input type="radio" name="gender" value="female">
<span class="radio-custom"></span>
女
</label>
</div>
</div>
<div>
<label for="intro">个人简介</label>
<textarea id="intro" rows="4" placeholder="请输入个人简介"></textarea>
</div>
<button type="submit">提交信息</button>
</form>
</body>
</html>