CSS 表单

表单是网页收集用户信息的入口——登录、注册、搜索、留言都靠它。浏览器自带的 input、button 样式简陋且各平台显示不一，用 CSS 统一美化后，页面观感会立刻专业起来。本节讲解输入框、聚焦态、复选框与按钮等常用表单样式。

输入框样式

设置宽度、内边距、边框与圆角，并配合 box-sizing，输入框就不会“撑破”父容器：

input[type=text], input[type=password], select {
    width: 100%;             /* 占满父容器宽度 */
    padding: 12px 20px;      /* 文字与边框保持距离 */
    margin: 8px 0;           /* 输入框之间留白 */
    display: inline-block;
    box-sizing: border-box;  /* 宽度包含内边距与边框 */
    border: 1px solid #ccc;  /* 细边框 */
    border-radius: 4px;      /* 圆角更柔和 */
}

效果：输入框占满整行、文字不贴边，比浏览器默认样式清爽很多。

聚焦态样式

用户点击输入框时高亮边框，提示“当前位置正在输入”：

input[type=text]:focus {
    border: 2px solid #4CAF50; /* 聚焦时边框变绿加粗 */
    outline: none;             /* 去掉浏览器默认黑圈 */
}
input[type=text]::placeholder {
    color: #aaa;               /* 提示文字颜色调淡 */
}

效果：聚焦后边框变绿，占位提示文字呈浅灰色，输入位置一目了然。

复选框与单选按钮

默认复选框在不同平台长相不一，常用技巧是让 label 包住 input，文字也可点选：

<form>
  <label><input type="checkbox" name="agree"> 我已阅读并同意协议</label>
  <label><input type="radio" name="sex" value="m"> 男</label>
  <label><input type="radio" name="sex" value="f"> 女</label>
</form>

label { margin-right: 20px; cursor: pointer; } /* 悬停显示小手 */

效果：点击整行文字即可勾选，选项间距与鼠标手型让操作更顺手。

提交按钮样式

按钮是表单的收尾动作，hover 变色提示可点击：

input[type=submit] {
    background-color: #4CAF50; /* 绿色主按钮 */
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;           /* 鼠标变小手 */
}
input[type=submit]:hover {
    background-color: #45a049; /* 悬停变深绿 */
}

效果：鼠标悬停按钮变深，视觉反馈清晰；与聚焦态、复选框组合即是一个像样的表单页。

小结

美化表单的关键词是“统一”：输入框尺寸边距统一、聚焦高亮统一、按钮配色统一。再配合 ::placeholder 等伪元素打磨细节，表单既好用又好看。