input美化需注意三处关键：伪类兼容性（如::placeholder须写全前缀）、box-sizing: border-box防圆角塌陷、outline: none配合box-shadow保障可访问性焦点反馈。
直接用 CSS 控制 input 元素的样式就能实现绝大多数输入框美化效果，不需要 JS 或额外框架——但要注意伪类、盒模型和浏览器兼容性这三处最容易出问题。
input 边框与圆角怎么设才不塌陷
很多初学者写 border-radius: 6px 后发现圆角没生效，或在 Chrome/Firefox 中表现不一致，本质是默认 box-sizing 是 content-box，而 padding 和 border 会撑大元素尺寸，导致圆角被截断。
- 必须显式加
box-sizing: border-box，让 width/height 包含 padding 和 border -
border建议用 solid，避免 dotted/dashed 在 focus 时渲染错位 - IE 11 及以下不支持
border-radius，若需兼容，得用图片或 JS 模拟（现代项目基本可忽略） - 移动端 Safari 对小尺寸圆角（如
2px）渲染偏生硬，建议最低设为4px
::placeholder 样式为什么有时不生效
::placeholder 是标准伪元素，但不同浏览器前缀和行为有差异，尤其在旧版 Edge 和 iOS Safari 上容易失效。
- 务必同时写全三种写法：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder - 不能在
::placeholder里用!important覆盖父级 color，部分浏览器会忽略 - 如果 input 本身设置了
color: #333，而 placeholder 也设了color: #999，但没生效，大概率是缺少opacity或用了不支持的字体属性（如font-variant） - 注意：Firefox 的
:-moz-placeholder（单冒号）已废弃，只认双冒号
focus 状态下边框高亮总被 outline 覆盖
点击 input 后出现的蓝色“外发光”其实是浏览器默认的 outline，它层叠在 border 之上，会遮住你精心设计的 border-color 或 box-shadow。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须加
outline: none或outline: 0才能真正移除它 - 但仅移除 outline 不够——键盘用户依赖焦点指示，所以要用
box-shadow或更粗的border替代，确保可访问性 - 推荐写法：
input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } - 别用
transition: all .2s，应明确写transition: border-color .2s, box-shadow .2s，避免触发重排
带图标的 input 怎么让文字不遮挡图标
用 background-image 插入图标时，文字常从最左侧开始输入，直接盖在图标上。
- 核心是控制内边距：
padding-left必须大于图标宽度 + 左侧留白（比如图标宽 16px，留白 10px → 至少padding-left: 26px） - 图标用
background-position: 10px center定位，避免用百分比或 calc()（IE 不支持） - 如果图标是 SVG 或 base64，注意 URL 中的特殊字符（如
#）要编码，否则样式会中断 - 响应式场景下，图标大小可能变化，此时改用
background-size: 16px并配合padding-left: calc(16px + 10px)更稳妥（仅限现代浏览器）
真正难的不是写出某个效果，而是让所有效果在 focus/invalid/disabled/hover/缩放/高对比度模式下都保持可用——尤其是 disabled 状态的 contrast ratio 和 placeholder 的可读性，这些细节常被跳过，却直接影响用户是否愿意填完表单。
