HTML文本框加下划线需设border: none、border-bottom: 1px solid #999、outline: none，并用height+padding+box-sizing: border-box精准对齐基线；focus时仅transition border-bottom-color；iOS需避免viewport限制及fixed定位以防键盘错位。
HTML input 文本框怎么加下划线样式
默认的 <input type="text"> 没有下划线，只有边框。要“加下划线”，本质是用 CSS 覆盖掉上、左、右三边边框，只保留底部边框。
- 别直接改
border-bottom还留着其他三边——容易和默认边框叠加出奇怪粗细或颜色冲突 - 必须显式重置三边为
none或0，再单独设border-bottom - 注意
outline：聚焦时浏览器默认加的虚线框不是边框，得额外清掉，否则下划线会被遮挡或错位
<input type="text" class="underline-input">
<style>
.underline-input {
border: none;
border-bottom: 1px solid #999;
outline: none;
padding: 4px 0;
}
</style>
input 下划线怎么对齐文字基线不飘起来
纯靠 padding-bottom 拉距离会把下划线压得太低，文字看起来“浮”在上面；用 line-height 又容易影响高度控制。最稳的方式是固定 height + padding 组合，并确保 box-sizing 是 border-box。
- 不设
height仅靠padding：输入框高度随字体大小浮动，下划线位置不稳定 - 设了
height但没写box-sizing: border-box：padding会撑高整体，下划线被挤下去 - 推荐组合：
height: 36px+padding: 8px 0 4px（上内边距撑高文字，下内边距留出下划线呼吸空间）
focus 时下划线变色但不触发重排（re-layout）
用 :focus 改 border-bottom-color 是最轻量的做法，不会改变尺寸，也不会触发浏览器重排。但要注意两个坑：
- 别用
border-bottom-width动画——哪怕只动 1px，也会导致重排，输入框“抖一下” - 别用
box-shadow模拟下划线（比如box-shadow: 0 1px 0 #007bff）——虽然视觉像，但焦点切换时阴影渲染可能有延迟或模糊 - 如果需要 focus 时加个细动画，只对
border-bottom-color做transition，且限定在color属性上
.underline-input:focus {
border-bottom-color: #007bff;
transition: border-bottom-color 0.2s ease;
}
移动端 iOS Safari 输入时下划线被键盘顶上去
iOS Safari 在软键盘弹出时会错误地缩放或滚动页面，导致带下划线的 input 视觉错位，甚至下划线“断开”。这不是样式问题，是 viewport 行为异常。
立即学习“前端免费学习笔记（深入）”；
- 检查
<meta name="viewport">是否含user-scalable=no或maximum-scale=1.0——这些会让 Safari 对缩放逻辑更激进，加剧错位 - 给
input加min-height和height固定值，避免键盘弹出时父容器高度塌陷 - 真机调试时发现下划线“跳”：大概率是父元素用了
position: fixed或transform，iOS 对这类元素的键盘适配极差，换用position: absolute+ 定位微调更稳
