如何用纯样式给HTML表单项加下划线-html教程-PHP中文网

input 和 textarea 默认无下划线，需用 border-bottom 或伪元素模拟；推荐 padding-bottom + border-bottom 组合实现精准对齐；focus/invalid/disabled 状态应通过原生伪类控制样式以保障可访问性。

如何用纯样式给html表单项加下划线

input 和 textarea 默认没下划线，得自己加

表单控件（input、textarea）本身不带下划线，不像 a 标签有默认样式。直接写 text-decoration: underline 在它们身上是无效的——因为这些元素是替换元素（replaced element），text-decoration 对它们不起作用。

真正能生效的方式只有两种：用 border-bottom 模拟，或用伪元素生成下划线。

border-bottom 最常用：给 input[type="text"] 或 textarea 加 border-bottom: 1px solid #000，再清掉其他边框（border: none 或逐个设 border-top/right/bottom: none）
别写 border: 1px solid #000 后只改 bottom —— 这样会触发重绘且语义混乱
如果要用 focus 状态动态显示/隐藏下划线，优先控制 border-bottom-color 或 border-bottom-width，避免 border-bottom: none → border-bottom: 1px solid 这种切换，防止 layout shift

下划线要和文字对齐，别贴底或穿字母

用 border-bottom 的好处是位置完全可控；但默认值容易让线太靠下（尤其小字号时，像 font-size: 12px），看起来像悬空；或者太紧，碰到 g、y 的降部。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

推荐组合：padding-bottom: 2px + border-bottom: 1px solid currentColor —— 这样线离文字基线有明确间隙，且颜色随文本变
不要依赖 line-height 调整距离：它会影响整个行高，可能撑开容器或干扰垂直居中
对 textarea，额外注意 resize 和 box-sizing：设 box-sizing: border-box 才能让 padding-bottom 不额外增加高度

focus 和 invalid 状态下划线要可区分

用户需要视觉反馈：聚焦时下划线变色/加粗，校验失败时换为红色虚线——这些不能只靠 class 切换，得用原生伪类保证可访问性。

用 input:focus 和 input:invalid 直接写样式，比 JS 控制 class 更可靠（尤其表单自动填充或浏览器校验触发时）

示例：

input { border-bottom: 1px solid #999; }<br>input:focus { border-bottom-color: #007bff; outline: none; }<br>input:invalid { border-bottom: 2px dashed #dc3545; }

注意 outline: none 必须配替代焦点样式（比如加阴影或改下划线粗细），否则键盘用户无法识别焦点位置
Chrome 对 :invalid 的触发时机较保守（提交前可能不生效），如需实时校验，仍要配合 JS 设置 setCustomValidity 和 reportValidity

禁用状态（disabled）下划线要灰掉且不可交互

input:disabled 的下划线不能只是颜色变灰——它必须明确传达“不可编辑”，否则用户会误点。

除了改 border-bottom-color，还得设 cursor: not-allowed 和 opacity: 0.6（或更稳妥的 color: #6c757d + background-color: #f8f9fa）
别只用 opacity：它会让整个元素变灰，包括 placeholder 文字，而 placeholder 本就该弱化显示
移动端要注意：iOS Safari 对 input:disabled 的 cursor 支持有限，建议同时加 pointer-events: none 防止误触

真正麻烦的是多行输入（textarea）在不同字体下的 baseline 一致性——中文宋体、苹方、HarmonyOS Sans 的 descender 高度差异很大，padding-bottom 值没法一劳永逸。要么接受微调，要么把下划线逻辑抽成 CSS 自定义属性，在设计系统里统一维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！