利用CSS的:focus与::after伪元素可实现输入框聚焦时的提示效果；2. 推荐使用父容器结合:focus-within与::after显示提示内容；3. 也可通过相邻兄弟选择器使聚焦后兄弟元素显示提示；4. 注意定位、层级及移动端适配，复杂场景仍需JavaScript。
当用户点击输入框时，我们常需要显示一些辅助提示信息。利用CSS的 :focus 和 ::after 伪元素，可以不借助JavaScript实现简单的视觉提示效果。
:focus 是一个动态伪类，用于选中获得焦点的表单元素（比如 input）。::after 是一个伪元素，可在元素内容后插入装饰性内容。虽然 ::after 不能直接添加在表单控件上显示内容（因为 input 不支持子元素），但我们可以通过给 input 的父容器使用 ::after 来绕过这个限制。
常见做法是将 input 包裹在一个容器内，在容器上使用 :focus-within 或对 input 使用 :focus 配合相邻兄弟选择器来触发提示。
这是最推荐的方式，语义清晰且兼容性良好（现代浏览器支持）。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<div class="input-tip-container"> <input type="text" placeholder="请输入用户名"> </div>
如果提示信息放在 input 后面的另一个元素中（如 span），可通过 :focus + ::after 控制其显示。
示例代码：
<div> <input type="password" id="pwd"> <span class="tip-span"></span> </div>
这类纯CSS提示适合轻量级交互，但有几点需要注意：
基本上就这些，不复杂但容易忽略细节。合理使用 :focus 和 ::after，可以在不增加JS的情况下提升表单的可用性。
以上就是如何在CSS中使用:focus与::after制作输入框提示_通过:focus ::after显示辅助提示的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
502
收藏
