谷姐靓号网请见代码片段 https://codepen.io/zhao3574/pen/QWgdgaE
请问是否可以只用CSS实现点击搜索图标自动向两侧展开搜索框？像下图这样。
现在写的CSS效果有出入，点击向右侧覆盖，并且导致其它元素有抖动。
热议
推荐楼 yousihai
2楼 明日香 3小时前
可以，但我讨厌 bootstrap，不想改
3楼 xnpivemc 3小时前
可以，但我讨厌 bootstrap，不想改
可以给个提示吗？折腾好久了。。
4楼 明日香 3小时前
可以给个提示吗？折腾好久了。。
.search input:focus { ... } 加一句 left: -100px;
5楼 明日香 3小时前
可以给个提示吗？折腾好久了。。
或者 .search input 和 .search input:focus 的 position 属性删掉
6楼 yousihai 3小时前
搜索下面叠一个input，把搜索的pointer-event设为none让用户直接点到input上，input focus后扩展。完成~
7楼 xnpivemc 3小时前
.search input:focus { ... } 加一句 left: -100px;
这样图标就移位了。。
8楼 xnpivemc 3小时前
或者 .search input 和 .search input:focus 的 position 属性删掉
这样就没了点击展开效果。。
9楼 xnpivemc 3小时前
搜索下面叠一个input，把搜索的pointer-event设为none让用户直接点到input上，input focus后扩展。完成~ ...
目前也是这样弄的哦，有一些问题，可以麻烦改下吗。。
10楼 明日香 3小时前
这样就没了点击展开效果。。
Chrome 浏览器下完全符合你要的效果，在 codepen 里直接试的
12楼 明日香 2小时前
搜索框没有点击前是隐藏状态哦
13楼 xnpivemc 2小时前
明日香 发表于 2021-9-8 16:18
这个效果之前实现过，有个缺点，它会使两侧元素移位，有办法以覆盖方式展开搜索框吗？
这个东西导致你的搜索框只能往左移，不删掉的话是无法解决的。
删除这个类然后把position: absolute删掉就好了
15楼 明日香 2小时前
这个效果之前实现过，有个缺点，它会使两侧元素移位，有办法以覆盖方式展开搜索框吗？ ...
把几个元素的大小和占位关系弄清楚了先
16楼 tianshiyeben 2小时前
mjj 也有css高手
17楼 xnpivemc 2小时前
这个东西导致你的搜索框只能往左移，不删掉的话是无法解决的。
删除这个类然后把position: absolute删掉 ...
还是不行。。
如果去掉 position: absolute，搜索框展开时它会挤压两侧元素，而不是覆盖两侧元素显示
18楼 xnpivemc 2小时前
把几个元素的大小和占位关系弄清楚了先
也就是正常单靠CSS不能覆盖两侧元素显示哦？
19楼 明日香 2小时前
也就是正常单靠CSS不能覆盖两侧元素显示哦？
你是怎么从这句话得出 单靠CSS不能 的结论的……
20楼 xnpivemc 2小时前
你是怎么从这句话得出 单靠CSS不能 的结论的……
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位
即使这样，也会出现两个问题，
一是展开后搜索图标被搜索框覆盖了，要解决需要在input:focus时将form::before通过添加z-index覆盖搜索框，这个好像不能通过css解决
第二个问题是展开搜索框后左侧元素会随form元素右移而移动
22楼 明日香 2小时前
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位
...
下班了，晚上如果还没解决再给你弄吧
23楼 yousihai 1小时前
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位
...
input本身就应该是absolute的，根本就不应该在focus的时候才设置。
24楼 xnpivemc 1小时前
去掉ml-auto，
请问有办法保持原有方向吗？即菜单列表和搜索图标整体向右。
25楼 xnpivemc 1小时前
下班了，晚上如果还没解决再给你弄吧
麻烦了，这个问题真的弄了好久，不然也不会来发帖。。
其他自己微调下就可以了
申明：本文内容由网友收集分享，仅供学习参考使用。如文中内容侵犯到您的利益，请在文章下方留言，本站会第一时间进行处理。
评论前必须登录！
立即登录 注册