表单输入框是网页里最高频的交互组件，但浏览器自带的样式在不同系统下表现不一，边框粗黑、文字紧贴边缘，整体观感比较廉价。通过 CSS 调整 padding 与 border，可以用很少的代码让输入框变得整洁、现代，并且适配各种设计风格。
为什么默认输入框不好看
各大浏览器为了兼容旧标准，给 <input> 和 <textarea> 设置了默认边框、内边距以及系统字体。以 Chrome 为例，未重置时输入框是 2px 的 inset 边框，加上约 1px 的默认 padding，看起来像凹陷的按钮，和扁平化设计格格不入。而 Safari 则会带有圆角与高亮外发光，风格难以统一。
更重要的是，默认盒模型下 padding 会叠加在 width 之外，开发者若写了固定宽度又加 padding，实际占位就会超出预期，导致布局错位。因此调整样式时不只是“变好看”，也是在修正盒模型与交互一致性。
用 border 重塑输入框轮廓
border 决定了输入框的边界质感。把默认 inset 边框替换为实线细边，是改造的第一步。建议用中性灰色，并在聚焦时切换为主题色，给用户明确反馈。
下面是一段基础重置代码，把边框改为 1px 实线、添加圆角，并去掉 Safari 的外发光：
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #d0d0d0;
border-radius: 4px;
outline: none;
/* 去掉 Safari 默认外观 */
-webkit-appearance: none;
appearance: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
上面的写法中，box-shadow 模拟了轻盈的聚焦环，比直接改 outline 更柔和。注意 border-color 过渡可以加上 transition，让交互更顺滑。
用 padding 控制内部呼吸感
padding 控制文字与边框的距离。默认接近 0 的 padding 会让文字贴边，阅读压力大。一般文本输入框设 8px 12px 即可，移动端可略微加大方便点击。
但前面提到，默认 content-box 会让 padding 增加元素总宽。所以务必配合 box-sizing: border-box，这样写了 width: 240px 后，padding 和 border 都算在 240px 内，不会再撑破布局：
input[type="text"] {
box-sizing: border-box;
width: 240px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.4;
}
如果输入框用于搜索或登录，padding 还可以左侧留大一点放图标，右侧留空间给清除按钮。这种微调不需要改结构，纯靠 padding 与 text-indent 就能实现。
完整可复用方案
把 border 与 padding 组合，并加入状态管理和禁用态，就能形成一套可维护的样式。使用 CSS 变量能避免颜色硬编码：
:root {
--input-border: #d0d0d0;
--input-focus: #3b82f6;
--input-pad-y: 8px;
--input-pad-x: 12px;
}
.form-input {
box-sizing: border-box;
width: 100%;
padding: var(--input-pad-y) var(--input-pad-x);
border: 1px solid var(--input-border);
border-radius: 6px;
font-size: 14px;
transition: border-color .15s ease;
}
.form-input:focus {
border-color: var(--input-focus);
box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.form-input:disabled {
background: #f5f5f5;
color: #999;
cursor: not-allowed;
}
这种写法在 HTML 里只需要给输入框加 class="form-input"。后续换肤或调整间距，只改变量即可，不需要逐个重写。配合 label 的纵向排布，就能搭出清晰的表单界面。
常见误区与排查
有人直接把 height 写死再调 padding，结果不同字体下文字垂直不居中。其实用 padding 加 line-height 控制，或改用 flex 布局的父容器，都比定高更稳。另外不要忘记 textarea 的 resize 与 padding 叠加问题，最好也统一 box-sizing。
还有开发者用 border: none 后再用背景色区分输入框，这会让无障碍工具难以识别可输入区域。保留 1px 低对比边框，比完全无边框更友好。调样式时兼顾美观与可用性，才是合理的改造方式。
cssform_inputpadding_border修改时间：2026-08-09 13:27:28