直接清除浏览器默认边框并用border重绘，配合:focus和:hover实现状态反馈：先设outline:none、border:1px solid #ccc、background-color:#fff、box-sizing:border-box；聚焦时改border-color为#409eff并加box-shadow光晕，加transition动画；兼顾可访问性需设:focus-visible；微调border-radius:4px、padding:8px 12px、font-size:14px/16px、appearance:none；禁用时设灰背景与浅色文字，错误态用红边，搭配label提升体验。
直接去掉默认边框，用 border 重绘，再配合 :focus 和 :hover 做状态反馈，就能让输入框立刻清爽专业。
清除浏览器默认样式
不同浏览器对 <input type="text"> 有各自的边框、阴影和背景色（比如 Chrome 的浅蓝焦点环、Safari 的内阴影），第一步必须重置：
- 加
outline: none;去掉点击时的默认外轮廓（注意：可访问性需后续用其他方式替代） - 设
border: 1px solid #ccc;明确边框，避免有的浏览器默认无边或带圆角 - 写
background-color: #fff;防止深色主题下背景异常 - 推荐统一加
box-sizing: border-box;，方便后续控制宽高
自定义 focus 状态（重点）
用户点进去时，要清晰传达“当前正在编辑”，不能只靠 outline 消失：
- 用
border-color: #409eff;换成品牌主色，比默认蓝更协调 - 加
box-shadow: 0 0 0 2px rgba(64, 158, 239, 0.2);做柔和光晕，比纯边框更现代 - 如果需要动画过渡，补上
transition: border-color .2s, box-shadow .2s; - 别忘了同时设置
input:focus-visible保证键盘聚焦也生效（兼顾可访问性）
微调细节提升质感
边框只是基础，几个小改动能让输入框真正耐看：
立即学习“前端免费学习笔记（深入）”；
- 圆角建议用
border-radius: 4px;—— 太圆（如 8px）显软，太直（0px）显冷 - 文字内边距用
padding: 8px 12px;，左右留白比上下稍大，视觉更平衡 - 字体大小保持
font-size: 14px;或16px;，太小难读，太大撑出容器 - 禁用系统默认的
appearance: none;（尤其 Safari 中防止圆角/阴影残留）
额外提醒：别忽略状态组合
真实场景中，输入框常叠加多种状态，记得提前测试：
-
input:disabled要设background-color: #f5f5f5;和color: #999;表示不可用 -
input.error类可单独定义红边border-color: #f56c6c;+ 提示图标 - 搭配
label使用for属性，点击标签也能聚焦输入框，体验更友好
不复杂但容易忽略。关键不是堆效果，而是用一致的色彩、间距和动效建立可预期的交互反馈。
