全球主机交流论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

CeraNetworks网络延迟测速工具IP归属甄别会员请立即修改密码
查看: 1739|回复: 27
打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
1#
发表于 2021-9-8 15:48:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
请见代码片段 https://codepen.io/zhao3574/pen/QWgdgaE

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


现在写的CSS效果有出入,点击向右侧覆盖,并且导致其它元素有抖动。
推荐
发表于 2021-9-8 16:59:14 | 只看该作者
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:07
2#
发表于 2021-9-8 15:51:38 | 只看该作者
可以,但我讨厌 bootstrap,不想改
3#
 楼主| 发表于 2021-9-8 15:52:33 | 只看该作者
明日香 发表于 2021-9-8 15:51
可以,但我讨厌 bootstrap,不想改

可以给个提示吗?折腾好久了。。
4#
发表于 2021-9-8 15:56:23 | 只看该作者
本帖最后由 明日香 于 2021-9-8 16:00 编辑
xnpivemc 发表于 2021-9-8 15:52
可以给个提示吗?折腾好久了。。


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

5#
发表于 2021-9-8 16:00:55 | 只看该作者
xnpivemc 发表于 2021-9-8 15:52
可以给个提示吗?折腾好久了。。

或者 .search input 和 .search input:focus 的 position 属性删掉
6#
发表于 2021-9-8 16:02:58 | 只看该作者
搜索下面叠一个input,把搜索的pointer-event设为none让用户直接点到input上,input focus后扩展。完成~
7#
 楼主| 发表于 2021-9-8 16:04:21 | 只看该作者
明日香 发表于 2021-9-8 15:56
.search input:focus { ... } 加一句 left: -100px;

这样图标就移位了。。
8#
 楼主| 发表于 2021-9-8 16:05:26 | 只看该作者
明日香 发表于 2021-9-8 16:00
或者 .search input 和 .search input:focus 的 position 属性删掉

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

目前也是这样弄的哦,有一些问题,可以麻烦改下吗。。
10#
发表于 2021-9-8 16:10:55 | 只看该作者
xnpivemc 发表于 2021-9-8 16:05
这样就没了点击展开效果。。

Chrome 浏览器下完全符合你要的效果,在 codepen 里直接试的
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

GMT+8, 2026-1-13 14:34 , Processed in 0.069295 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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