通过优化border、padding和:focus状态可显著提升输入框外观。1. 设置浅灰边框border:1px solid #ccc和圆角border-radius:6px；2. 增加内边距如padding:8px 12px改善视觉舒适度；3. 聚焦时通过border-color:#007bff和box-shadow增强交互反馈；4. 添加transition:all .3s ease实现平滑动画。组合这些样式使输入框更现代专业。
表单输入框默认样式确实比较简陋，但通过简单的 CSS 属性就能大幅提升视觉效果。重点用好 border、padding 和 :focus 伪类，可以让输入框看起来更现代、更专业。
1. 使用 border 控制边框样式
去掉默认的粗边框或凹陷感，换成清晰柔和的线条：
-
• 设置统一颜色边框，比如浅灰色：
border: 1px solid #ccc;
• 圆角边框更友好：border-radius: 6px;
• 去掉浏览器默认 outline 同时自定义 focus 边框
2. 添加 padding 提升内部空间感
默认输入框文字贴边，体验差。加点内边距让内容更舒适：
-
• 水平方向留白：
padding: 8px 12px;
• 移动端可稍大些，比如 12px 16px
• 配合字体大小调整，保持整体协调
3. 利用 :focus 伪类增强交互反馈
用户点击输入框时，给出明显但不突兀的响应：
立即学习“前端免费学习笔记（深入）”；
-
• 聚焦时改变边框颜色，如蓝色：
border-color: #007bff;
• 添加轻微阴影提升层次感：box-shadow: 0 0 4px rgba(0,123,255,.25);
• 过渡动画更顺滑：transition: all 0.3s ease;
4. 完整示例代码参考
把上面几点组合起来：
input {
width: 100%;
padding: 10px 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 6px;
outline: none;
transition: all 0.3s ease;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0,123,255,.1);
}
基本上就这些。不复杂但容易忽略细节。合理搭配 border、padding 和 focus 状态，就能让表单输入框从“丑”变“顺眼”。
