全球主机交流论坛

标题: 求助大佬是否可以用纯 CSS 实现这个效果？ [打印本页]
作者: xnpivemc    时间: 2021-9-8 15:48
标题: 求助大佬是否可以用纯 CSS 实现这个效果？
请见代码片段 https://codepen.io/zhao3574/pen/QWgdgaE

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


现在写的CSS效果有出入，点击向右侧覆盖，并且导致其它元素有抖动。
作者: 明日香    时间: 2021-9-8 15:51
可以，但我讨厌 bootstrap，不想改
作者: xnpivemc    时间: 2021-9-8 15:52
明日香 发表于 2021-9-8 15:51
可以，但我讨厌 bootstrap，不想改

可以给个提示吗？折腾好久了。。
作者: 明日香    时间: 2021-9-8 15:56
本帖最后由 明日香 于 2021-9-8 16:00 编辑
xnpivemc 发表于 2021-9-8 15:52
可以给个提示吗？折腾好久了。。


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

作者: 明日香    时间: 2021-9-8 16:00
xnpivemc 发表于 2021-9-8 15:52
可以给个提示吗？折腾好久了。。

或者 .search input 和 .search input:focus 的 position 属性删掉
作者: yousihai    时间: 2021-9-8 16:02
搜索下面叠一个input，把搜索的pointer-event设为none让用户直接点到input上，input focus后扩展。完成~
作者: xnpivemc    时间: 2021-9-8 16:04
明日香 发表于 2021-9-8 15:56
.search input:focus { ... } 加一句 left: -100px;

这样图标就移位了。。
作者: xnpivemc    时间: 2021-9-8 16:05
明日香 发表于 2021-9-8 16:00
或者 .search input 和 .search input:focus 的 position 属性删掉

这样就没了点击展开效果。。
作者: xnpivemc    时间: 2021-9-8 16:09
yousihai 发表于 2021-9-8 16:02
搜索下面叠一个input，把搜索的pointer-event设为none让用户直接点到input上，input focus后扩展。完成~ ...

目前也是这样弄的哦，有一些问题，可以麻烦改下吗。。
作者: 明日香    时间: 2021-9-8 16:10
xnpivemc 发表于 2021-9-8 16:05
这样就没了点击展开效果。。

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

搜索框没有点击前是隐藏状态哦
作者: 明日香    时间: 2021-9-8 16:18
xnpivemc 发表于 2021-9-8 16:14
搜索框没有点击前是隐藏状态哦

作者: xnpivemc    时间: 2021-9-8 16:24
明日香 发表于 2021-9-8 16:18

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

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

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

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

也就是正常单靠CSS不能覆盖两侧元素显示哦？
作者: 明日香    时间: 2021-9-8 16:44
xnpivemc 发表于 2021-9-8 16:41
也就是正常单靠CSS不能覆盖两侧元素显示哦？

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

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

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

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

第二个问题是展开搜索框后左侧元素会随form元素右移而移动
作者: yousihai    时间: 2021-9-8 16:59
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. }
复制代码
作者: 明日香    时间: 2021-9-8 17:03
xnpivemc 发表于 2021-9-8 16:58
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位

...

下班了，晚上如果还没解决再给你弄吧
作者: yousihai    时间: 2021-9-8 17:33
xnpivemc 发表于 2021-9-8 16:58
反复测试如果要覆盖元素，必须在input:focus时将position改为absolute，不然相对定位会使两侧元素移位

...

input本身就应该是absolute的，根本就不应该在focus的时候才设置。
作者: xnpivemc    时间: 2021-9-8 17:34
yousihai 发表于 2021-9-8 16:59
去掉ml-auto，

请问有办法保持原有方向吗？即菜单列表和搜索图标整体向右。
作者: xnpivemc    时间: 2021-9-8 17:35
明日香 发表于 2021-9-8 17:03
下班了，晚上如果还没解决再给你弄吧

麻烦了，这个问题真的弄了好久，不然也不会来发帖。。
作者: yousihai    时间: 2021-9-8 17:47
  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. }

  44. .search input::-webkit-input-placeholder {
  45.         color:#555;
  46.         padding-left:1px
  47. }
复制代码


其他自己微调下就可以了
作者: xnpivemc    时间: 2021-9-11 08:07
yousihai 发表于 2021-9-8 17:47
其他自己微调下就可以了

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



欢迎光临 全球主机交流论坛 (https://loc.888543.xyz/) Powered by Discuz! X3.4