CSS初级项目如何美化表单输入框_border padding focus伪类样式
通过设置 border、padding 和 :focus 伪类可美化输入框：使用 border: 1px solid #ccc 和 border-radius: 6px 实现圆角边框，或仅保留底部边框以简化设计；通过 padding: 8px 12px 增加内边距，提升可读性与点击区域；聚焦时利用 :focus 改变边框颜色为 #007bff，并添加 box-shadow 外发光效果与 transition: all 0.3s ease 过渡动画，增强交互反馈，从而打造简洁现代且用户体验良好的输入框样式。
美化表单输入框是前端开发中常见的任务。一个设计良好的输入框不仅能提升页面美观度，还能增强用户体验。通过合理使用 CSS 中的 border、padding 和 :focus 伪类，可以轻松实现简洁现代的输入框样式。
设置边框（border）样式
边框是输入框最明显的视觉部分，可以通过调整颜色、粗细和圆角来改善外观。
- 使用
border: 1px solid #ccc;设置浅灰色边框，显得柔和不刺眼 - 添加圆角：
border-radius: 6px;让输入框更现代 - 去除默认边框（如需扁平化设计）：
border: none;或只保留底部边框：border: 0 none; border-bottom: 2px solid #007bff;
调整内边距（padding）提升可读性
合适的内边距能让文本与边框保持舒适距离，避免拥挤感。
- 水平方向留白：
padding: 8px 12px; - 移动端可适当增大：
padding: 12px 16px;提高点击区域 - 确保文字垂直居中，避免因行高或字体导致偏移
padding: 8px 12px;使用 :focus 伪类增强交互反馈
当用户点击输入框时，提供清晰的聚焦状态能显著提升可用性。
- 改变边框颜色：
border-color: #007bff; - 添加外发光效果：
outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); - 配合过渡动画更自然：
transition: all 0.3s ease;
基本上就这些。结合 border、padding 和 :focus，就能做出干净专业的输入框样式，不复杂但容易忽略细节。
