通过优化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 状态，就能让表单输入框从“丑”变“顺眼”。