在前端表单开发中，输入框聚焦时展示辅助提示是很常见的交互需求，比如提示用户输入手机号需要11位数字，或者密码需要包含大小写字母和数字。借助CSS的:focus伪类，我们可以完全不用JavaScript就实现这个效果，让提示内容在输入框获得焦点时自动显示，失去焦点时自动隐藏。
基础实现思路
核心逻辑是把提示内容作为输入框的相邻兄弟元素，通过:focus伪类选中聚焦状态下的输入框，再配合兄弟选择器+控制提示元素的显示隐藏。默认的提示元素设置为隐藏，当输入框聚焦时将其设置为显示即可。
基础代码示例
下面是最简单的实现示例，提示内容默认隐藏，输入框聚焦时显示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框聚焦提示示例</title>
<style>
/* 输入框基础样式 */
.input-box {
width: 300px;
height: 36px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
font-size: 14px;
}
/* 输入框聚焦时的边框样式 */
.input-box:focus {
border-color: #409eff;
}
/* 提示内容默认隐藏 */
.tip-text {
display: none;
margin-top: 6px;
font-size: 12px;
color: #999;
}
/* 输入框聚焦时显示相邻兄弟提示 */
.input-box:focus + .tip-text {
display: block;
}
</style>
</head>
<body>
<div class="form-item">
<input type="text" class="input-box" placeholder="请输入手机号">
<div class="tip-text">请输入11位有效的手机号码</div>
</div>
</body>
</html>
进阶样式调整
基础的显示隐藏效果比较生硬，我们可以添加过渡动画让提示出现更自然，也可以调整提示的位置和样式，适配不同的设计需求。
添加过渡动画
通过opacity和transition属性可以实现提示内容的淡入效果，比直接切换display更平滑：
/* 提示内容默认透明且不可见 */
.tip-text {
opacity: 0;
visibility: hidden;
margin-top: 6px;
font-size: 12px;
color: #999;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 输入框聚焦时提示淡入 */
.input-box:focus + .tip-text {
opacity: 1;
visibility: visible;
}
提示内容定位调整
如果需要提示内容显示在输入框的右侧或者内部，可以调整布局方式，比如使用相对定位和绝对定位组合：
.form-item {
position: relative;
width: 300px;
}
.input-box {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
font-size: 14px;
box-sizing: border-box;
}
.input-box:focus {
border-color: #409eff;
}
/* 提示定位在输入框右侧 */
.tip-text {
opacity: 0;
visibility: hidden;
position: absolute;
left: 310px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #999;
white-space: nowrap;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.input-box:focus + .tip-text {
opacity: 1;
visibility: visible;
}
注意事项
- 提示元素必须是输入框的直接相邻兄弟元素，才能使用
+选择器选中，如果中间隔了其他元素，需要使用~通用兄弟选择器。 - 如果输入框是动态生成的，只要保证提示元素和输入框的兄弟关系正确，CSS规则依然会生效。
- 部分旧版本浏览器对
:focus伪类的支持没有问题，但如果需要兼容非常老的浏览器，建议测试后再使用。 - 如果提示内容需要包含可点击的链接，可以把链接放在提示元素内部，比如<a href="https://ipipp.com">查看规则</a>，这种在提示元素内的链接是可以正常点击的。
常见问题解答
提示内容在输入框失焦后立即消失怎么办
如果提示内容里有可交互的元素，比如按钮或者链接，直接失焦会无法操作，这种情况可以调整逻辑，让提示在输入框失焦后延迟隐藏，或者只有点击其他区域时才隐藏，不过这种场景就需要配合少量JavaScript实现了。
多个输入框都需要提示怎么处理
只需要给每个输入框和对应的提示元素设置相同的类名，复用上面的CSS规则即可，不需要重复编写样式，示例如下：
<div class="form-item">
<input type="text" class="input-box" placeholder="请输入用户名">
<div class="tip-text">用户名长度为6-12位字符</div>
</div>
<div class="form-item">
<input type="password" class="input-box" placeholder="请输入密码">
<div class="tip-text">密码需要包含大小写字母和数字</div>
</div>