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

xnpivemc

请见代码片段 https://codepen.io/zhao3574/pen/QWgdgaE

请问是否可以只用CSS实现点击搜索图标自动向两侧展开搜索框？像下图这样。


现在写的CSS效果有出入，点击向右侧覆盖，并且导致其它元素有抖动。

yousihai

xnpivemc 发表于 2021-9-8 16:38
还是不行。。
如果去掉 position: absolute，搜索框展开时它会挤压两侧元素，而不是覆盖两侧元素显示 ...

去掉ml-auto，

1. .search {
   
2.         position:relative;
   
3.         display:-ms-flexbox;
   
4.         display:flex;
   
5.   width: 32px;
   
6.         align-items:center
   
7. }
   
8. .search::before {
   
9.         font-family:FontAwesome;
   
10.         font-weight:normal;
    
11.         line-height:1;
    
12.         position:absolute;
    
13.         z-index:1030;
    
14.         left:7px;
    
15.         top:50%;
    
16.         -webkit-transform:translateY(-50%);
    
17.         transform:translateY(-50%);
    
18.         content:"\f002";
    
19.         color:#fff;
    
20.         font-size:18px
    
21. }
    
22. .search input {
    
23.         position:absolute;
    
24.         z-index:1030;
    
25.         width:32px;
    
26.         height:32px;
    
27.         color:#555;
    
28.         font-size:13px;
    
29.         background:transparent;
    
30.         border:none;
    
31.         padding:5px 0 5px 33px;
    
32.         border-radius:5px
    
33. }
    
34. .search input:focus {
    
35.         width:200px;
    
36.         padding-right:15px;
    
37.         background:#fafafa;
    
38.         outline:0
    
39. }
    
40. .search input::-webkit-input-placeholder {
    
41.         color:#555;
    
42.         padding-left:1px
    
43. }

复制代码

xnpivemc

yousihai 发表于 2021-9-8 17:47
其他自己微调下就可以了

感谢感谢！这样就可以了。

yousihai

1. .search {
   
2.         position:relative;
   
3.         display:-ms-flexbox;
   
4.         display:flex;
   
5.   margin-left: -5px;
   
6.         align-items:center
   
7. }
   
8. .search::before {
   
9.         font-family:FontAwesome;
   
10.         font-weight:normal;
    
11.         line-height:1;
    
12.         position:absolute;
    
13.         z-index:1030;
    
14.         left:3px;
    
15.         top:50%;
    
16.   pointer-events: none;
    
17.         -webkit-transform:translateY(-50%);
    
18.         transform:translateY(-50%);
    
19.         content:"\f002";
    
20.         color: lightgray;
    
21.         font-size:18px
    
22. }
    
23. .search input {
    
24.                 position:absolute;
    
25.   cursor: default;
    
26.         z-index:1000;
    
27.         width:32px;
    
28.         height:32px;
    
29.         color:#555;
    
30.         font-size:13px;
    
31.         background:transparent;
    
32.         border:none;
    
33.         padding:5px 0 5px 33px;
    
34.         border-radius:5px
    
35. }
    
36. .search input:focus {
    
37.         width:200px;
    
38.         padding-right:15px;
    
39.         background:#fafafa;
    
40.         outline:0
    
41.     cursor: text;
    
42. }
    
43. 
    
44. .search input::-webkit-input-placeholder {
    
45.         color:#555;
    
46.         padding-left:1px
    
47. }

复制代码

其他自己微调下就可以了

xnpivemc

明日香 发表于 2021-9-8 17:03
下班了，晚上如果还没解决再给你弄吧

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

xnpivemc

yousihai 发表于 2021-9-8 16:59
去掉ml-auto，

请问有办法保持原有方向吗？即菜单列表和搜索图标整体向右。

yousihai

xnpivemc 发表于 2021-9-8 16:58
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位

...

input本身就应该是absolute的，根本就不应该在focus的时候才设置。

明日香

xnpivemc 发表于 2021-9-8 16:58
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位

...

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

xnpivemc

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

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

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

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

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

明日香

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

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