求助大佬是否可以用纯 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. }

复制代码

明日香

可以，但我讨厌 bootstrap，不想改

xnpivemc

明日香 发表于 2021-9-8 15:51
可以，但我讨厌 bootstrap，不想改

可以给个提示吗？折腾好久了。。

明日香

xnpivemc 发表于 2021-9-8 15:52
可以给个提示吗？折腾好久了。。

.search input:focus { ... } 加一句 left: -100px;

明日香

xnpivemc 发表于 2021-9-8 15:52
可以给个提示吗？折腾好久了。。

或者 .search input 和 .search input:focus 的 position 属性删掉

yousihai

搜索下面叠一个input，把搜索的pointer-event设为none让用户直接点到input上，input focus后扩展。完成~

xnpivemc

明日香 发表于 2021-9-8 15:56
.search input:focus { ... } 加一句 left: -100px;

这样图标就移位了。。

xnpivemc

明日香 发表于 2021-9-8 16:00
或者 .search input 和 .search input:focus 的 position 属性删掉

这样就没了点击展开效果。。

xnpivemc

yousihai 发表于 2021-9-8 16:02
搜索下面叠一个input，把搜索的pointer-event设为none让用户直接点到input上，input focus后扩展。完成~ ...

目前也是这样弄的哦，有一些问题，可以麻烦改下吗。。

明日香

xnpivemc 发表于 2021-9-8 16:05
这样就没了点击展开效果。。

Chrome 浏览器下完全符合你要的效果，在 codepen 里直接试的