全球主机交流论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

CeraNetworks网络延迟测速工具IP归属甄别会员请立即修改密码
楼主: xnpivemc
打印 上一主题 下一主题

[Windows VPS] 求助大佬是否可以用纯 CSS 实现这个效果?

[复制链接]
11#
 楼主| 发表于 2021-9-8 16:14:33 | 只看该作者
明日香 发表于 2021-9-8 16:10
Chrome 浏览器下完全符合你要的效果,在 codepen 里直接试的

搜索框没有点击前是隐藏状态哦
12#
发表于 2021-9-8 16:18:57 | 只看该作者
xnpivemc 发表于 2021-9-8 16:14
搜索框没有点击前是隐藏状态哦

13#
 楼主| 发表于 2021-9-8 16:24:48 | 只看该作者

这个效果之前实现过,有个缺点,它会使两侧元素移位,有办法以覆盖方式展开搜索框吗?
14#
发表于 2021-9-8 16:29:12 | 只看该作者
xnpivemc 发表于 2021-9-8 16:24
这个效果之前实现过,有个缺点,它会使两侧元素移位,有办法以覆盖方式展开搜索框吗? ...
  1. .ml-auto, .mx-auto {
  2.     margin-left: auto!important;
  3. }
复制代码

这个东西导致你的搜索框只能往左移,不删掉的话是无法解决的。
删除这个类然后把position: absolute删掉就好了
15#
发表于 2021-9-8 16:30:37 | 只看该作者
xnpivemc 发表于 2021-9-8 16:24
这个效果之前实现过,有个缺点,它会使两侧元素移位,有办法以覆盖方式展开搜索框吗? ...

把几个元素的大小和占位关系弄清楚了先
16#
发表于 2021-9-8 16:32:42 | 只看该作者
提示: 作者被禁止或删除 内容自动屏蔽
17#
 楼主| 发表于 2021-9-8 16:38:44 | 只看该作者
yousihai 发表于 2021-9-8 16:29
这个东西导致你的搜索框只能往左移,不删掉的话是无法解决的。
删除这个类然后把position: absolute删掉 ...

还是不行。。
如果去掉 position: absolute,搜索框展开时它会挤压两侧元素,而不是覆盖两侧元素显示
18#
 楼主| 发表于 2021-9-8 16:41:02 | 只看该作者
明日香 发表于 2021-9-8 16:30
把几个元素的大小和占位关系弄清楚了先

也就是正常单靠CSS不能覆盖两侧元素显示哦?
19#
发表于 2021-9-8 16:44:58 | 只看该作者
xnpivemc 发表于 2021-9-8 16:41
也就是正常单靠CSS不能覆盖两侧元素显示哦?

你是怎么从这句话得出 单靠CSS不能 的结论的……
20#
 楼主| 发表于 2021-9-8 16:58:09 | 只看该作者
明日香 发表于 2021-9-8 16:44
你是怎么从这句话得出 单靠CSS不能 的结论的……

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

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

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

第二个问题是展开搜索框后左侧元素会随form元素右移而移动
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|全球主机交流论坛

GMT+8, 2026-1-13 16:27 , Processed in 0.065125 second(s), 7 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表