[!info] related notes

• 所属 MOC: CSS MOC
• 相关主题: CSS 文本与视觉样式
• 实战场景: 网页的响应式布局（网页平板手机）

CSS 表单样式

表单样式是 CSS 实战里非常高频的一类问题，因为它同时涉及可读性、可点击性、一致性和交互反馈。

一句话定义

表单样式的目标不是“把 input 变好看”，而是让输入、选择、提交这些交互控件在不同浏览器里表现稳定、清晰、可用。

最常见的样式目标

• 统一输入框高度
• 统一内边距和边框
• 提供清晰的聚焦态
• 控制 placeholder 风格
• 让按钮状态明确

最小例子

input,
textarea,
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #409eff;
  outline: none;
}

为什么表单样式总更难统一

因为很多表单控件带有浏览器和系统默认外观。

尤其是：

• select
• checkbox
• radio
• 日期和时间类输入控件

这些控件往往不像普通 div 一样容易完全控制。

写表单样式时要注意什么

• 不要只追求视觉统一，忽略焦点态和可访问性
• 不要为了“干净”把所有 outline 去掉，却不给替代焦点反馈
• 移动端下更要注意点击区域和输入框高度

最短记忆方式

表单样式的核心不是装饰，而是稳定、一致、可交互。

Related notes

• CSS MOC
• CSS 居中布局