xnpivemc 大佬有话说 :
求助大佬是否可以用纯 CSS 实现这个效果？
请见代码片段 https://codepen.io/zhao3574/pen/QWgdgaE
请问是否可以只用CSS实现点击搜索图标自动向两侧展开搜索框？像下图这样。
https://i.loli.net/2021/09/08/btudJUI7PgH1Emv.png
现在写的CSS效果有出入，点击向右侧覆盖，并且导致其它元素有抖动。
yousihai 大佬有话说 :
xnpivemc 大佬有话说 : 2021-9-8 16:38
还是不行。。
如果去掉 position: absolute，搜索框展开时它会挤压两侧元素，而不是覆盖两侧元素显示 …
去掉ml-auto，
.search {
position:relative;
display:-ms-flexbox;
display:flex;
width: 32px;
align-items:center
}
.search::before {
font-family:FontAwesome;
font-weight:normal;
line-height:1;
position:absolute;
z-index:1030;
left:7px;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
content:"f002";
color:#fff;
font-size:18px
}
.search input {
position:absolute;
z-index:1030;
width:32px;
height:32px;
color:#555;
font-size:13px;
background:transparent;
border:none;
padding:5px 0 5px 33px;
border-radius:5px
}
.search input:focus {
width:200px;
padding-right:15px;
background:#fafafa;
outline:0
}
.search input::-webkit-input-placeholder {
color:#555;
padding-left:1px
}
明日香 大佬有话说 :
可以，但我讨厌 bootstrap，不想改
xnpivemc 大佬有话说 :
明日香 大佬有话说 : 2021-9-8 15:51
可以，但我讨厌 bootstrap，不想改
可以给个提示吗？折腾好久了。。
明日香 大佬有话说 :
本帖最后由 明日香 于 2021-9-8 16:00 编辑
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 里直接试的