谷姐:我们都是谷歌迷
We are all Google fans

求助大佬是否可以用纯 CSS 实现这个效果?-xnpivemc

请见代码片段 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小时前

下班了,晚上如果还没解决再给你弄吧

麻烦了,这个问题真的弄了好久,不然也不会来发帖。。

其他自己微调下就可以了

申明:本文内容由网友收集分享,仅供学习参考使用。如文中内容侵犯到您的利益,请在文章下方留言,本站会第一时间进行处理。

未经谷姐允许不得转载:谷姐靓号网 » 求助大佬是否可以用纯 CSS 实现这个效果?-xnpivemc
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

买Google Voice认准【谷姐靓号网】

Google Voice靓号列表Google Voice自助购买
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活