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

xnpivemc

明日香 发表于 2021-9-8 16:10
Chrome 浏览器下完全符合你要的效果，在 codepen 里直接试的

搜索框没有点击前是隐藏状态哦

明日香

xnpivemc 发表于 2021-9-8 16:14
搜索框没有点击前是隐藏状态哦

xnpivemc

明日香 发表于 2021-9-8 16:18

这个效果之前实现过，有个缺点，它会使两侧元素移位，有办法以覆盖方式展开搜索框吗？

yousihai

xnpivemc 发表于 2021-9-8 16:24
这个效果之前实现过，有个缺点，它会使两侧元素移位，有办法以覆盖方式展开搜索框吗？ ...

1. .ml-auto, .mx-auto {
   
2.     margin-left: auto!important;
   
3. }
   

复制代码

这个东西导致你的搜索框只能往左移，不删掉的话是无法解决的。
删除这个类然后把position: absolute删掉就好了

明日香

xnpivemc 发表于 2021-9-8 16:24
这个效果之前实现过，有个缺点，它会使两侧元素移位，有办法以覆盖方式展开搜索框吗？ ...

把几个元素的大小和占位关系弄清楚了先

xnpivemc

yousihai 发表于 2021-9-8 16:29
这个东西导致你的搜索框只能往左移，不删掉的话是无法解决的。
删除这个类然后把position: absolute删掉 ...

还是不行。。
如果去掉 position: absolute，搜索框展开时它会挤压两侧元素，而不是覆盖两侧元素显示

xnpivemc

明日香 发表于 2021-9-8 16:30
把几个元素的大小和占位关系弄清楚了先

也就是正常单靠CSS不能覆盖两侧元素显示哦？

明日香

xnpivemc 发表于 2021-9-8 16:41
也就是正常单靠CSS不能覆盖两侧元素显示哦？

你是怎么从这句话得出 单靠CSS不能 的结论的……

xnpivemc

明日香 发表于 2021-9-8 16:44
你是怎么从这句话得出 单靠CSS不能 的结论的……

反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位

即使这样，也会出现两个问题，

一是展开后搜索图标被搜索框覆盖了，要解决需要在input:focus时将form::before通过添加z-index覆盖搜索框，这个好像不能通过css解决

第二个问题是展开搜索框后左侧元素会随form元素右移而移动