css里面鼠标点一下搜索框外面出现提示语

鼠标点进搜索框，面鼠还没打字，标点输入框外面就浮出一行灰字——“试试搜‘周末去哪’”。下搜这玩意儿不是索框placeholder，placeholder在框内，外面一点就没了。出现我说的提示是那种点进去之后，框外弹出来的面鼠提示，像气泡，标点又像便签，下搜悬在输入框的索框左上角或者下方，过两秒自己消失。外面

实现它的出现核心就一条：:focus伪类配合相邻兄弟选择器。你不需要JavaScript，提示不需要监听click事件，面鼠CSS自己就能搞定。结构大概是这样——一个div包着输入框和提示语，提示语用绝对定位放在框外，默认opacity:0，等输入框获得焦点，也就是鼠标点进去那一刻，opacity:1，再加个transition，让它淡入。

<div class="search-wrap"> <input type="text" class="search-input" /> <span class="hint">试试搜“周末去哪”</span> </div>

CSS里关键就两行。第一行，默认把hint藏起来，visibility:hidden或者opacity:0都行，但注意别用display:none，因为那玩意儿无法触发过渡动画。第二行，.search-input:focus + .hint { opacity:1; visibility:visible; }。就这么简单。加号是相邻兄弟选择器，它要求hint紧跟在input后面，中间不能隔着别的标签。你要是中间插了个图标，这招就废了，得改用~通用兄弟选择器，或者干脆把hint塞进label里。

我试过几种提示语的位置，发现放左上角最自然。右下角容易挡住用户视线，特别是手机端，手指头还戳在那儿呢。放上面也有讲究，别离输入框太远，间距控制在8到12像素，太远眼睛要跳一下才能看到，太近又显得挤。字体大小建议比placeholder小一号，12px左右，颜色用#999或者#aaa，别用纯黑，太抢戏。

有个细节很多人忽略——提示语出现之后，如果用户开始打字，这提示语应该消失。否则用户正敲键盘呢，余光瞥见“试试搜周末去哪”，感觉自己像个傻子，明明已经在搜了。所以你得再加一条规则：.search-input:not(:placeholder-shown) + .hint { opacity:0; }。意思就是，输入框里有内容了，提示语就滚蛋。:placeholder-shown这个伪类挺冷门，但特别好用，它检测的是placeholder是否可见。你要是没写placeholder属性，这招不灵，所以记得给input加个placeholder="搜索..."占位。

还有个更隐蔽的坑。你要是把提示语做成了span，而且它默认是visibility:hidden，那它在页面布局里依然占位置——不对，visibility:hidden不占视觉但占布局空间，可你用了绝对定位，它就不占空间了。但问题在于，绝对定位的父级必须设position:relative，不然提示语会跑到页面上方某个莫名其妙的位置去。这个坑我踩过，当时调试了半天，最后发现父级忘了加relative，提示语飘到浏览器顶部去了。

从用户体验角度说，这种框外提示比框内placeholder更高级。placeholder的致命弱点是——它一旦消失你就想不起来这框能搜啥。但框外提示可以持续提供“搜索建议”，甚至能根据用户输入动态变化。比如你输入“北京”，提示语可以变成“搜‘北京景点’试试”。当然，动态内容就得靠JavaScript配合了，但静态场景下，纯CSS已经够用。

我见过有些网站做得更花哨，提示语带个小箭头，指向输入框，像漫画里的对话气泡。实现也不难，用::before画个三角形，绝对定位在提示语底部中央。但说实话，箭头这东西可有可无，加了反而显得笨重。干净利落的文字提示，配个淡入动画，0.2秒过渡，就够了。别整1秒的慢悠悠动画，用户等不及。

对了，别忘了考虑键盘操作。按Tab键聚焦到输入框，:focus同样生效，提示语也会弹出来。这比鼠标点击更隐蔽，但视觉上没区别。你要是担心屏幕阅读器读这段提示语，可以在hint标签上加aria-hidden="true"，因为对盲人用户来说，输入框的label已经足够说明用途了，再读一遍提示语反而啰嗦。

最后说个个人看法——这功能适合搜索框、筛选框、命令面板这类“需要引导用户输入”的场景。但你要是做个注册表单，邮箱输入框外面弹一句“请输入有效邮箱”，那就纯属添乱。用户知道要填邮箱，不需要你提示。提示语的价值在于提供“用户想不到的搜索方向”，而不是重复已经明摆着的信息。分寸感，比技术本身更重要。