要是在家闲着没事的话，帮我看下这种搜索按钮是怎么实现的

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2501 天前的主题，其中的信息可能已经有所发展或是发生改变。

这是 Medium 的搜索按钮，这几天在家自己捣鼓博客主题，想换这种搜索按钮，但是不知道如何实现，没有思路。

请大家帮帮忙。

按钮

搜索

在家

medium

21 条回复 • 2018-02-16 12:18:45 +08:00

loading

2018-02-14 10:52:15 +08:00 via Android

放大镜是一个元素，绑定了点击事件，然后更改输入框宽度。

当然，有更优雅的方式吧。

a570295535

2018-02-14 10:52:47 +08:00

设置默认隐藏，js 点击显示 /隐藏啊

dibage

2018-02-14 10:53:12 +08:00

图标用的应该是字体图标，然后实现逻辑很简单：
点击搜索按钮（搜索按钮是一个 div，长度假设为 50px，点击后，设置长度为 300px，（假设））
可以通过 js 和 css 实现，搜索按钮后边的输入框是隐藏的，点击后向左展开显示，然后 focus 了

应该很简单吧。。认真脸

xubeiyan

2018-02-14 10:53:23 +08:00 via Android

就是搜索图标绑定个点击事件，使隐藏的 input 显示，并焦点聚集，input 失焦则隐藏它

xinhangliu

2018-02-14 10:54:01 +08:00

@loading
@a570295535

这能用纯 CSS 实现吗？

loading

2018-02-14 11:02:16 +08:00 via Android

应该可以纯 css。我还在摸鱼。

snarkprayer

2018-02-14 11:06:08 +08:00

这...
medium 的实现方式是，图标跟 input 都在一个 label 标签下，给图标绑定点击事件，点击切换 label 的 classname，在这个 classname 下，input 的宽度是 200

动画效果是给 input 一个 css 规则，transition （过渡动画）

jin5354

2018-02-14 11:07:08 +08:00

纯 css 可以用 label + input + : checked 实现

snarkprayer

2018-02-14 11:08:16 +08:00

@xinhangliu 纯 css 方式你可以搜索单复选框元素显隐技术

snarkprayer

2018-02-14 11:11:24 +08:00

我更正下....
点击图标直接给了 input:focus 状态，input:focus 下宽度变化了....

jin5354

2018-02-14 11:11:42 +08:00

上面写错了单选复选框用 :checked 文本输入框用 :focus 哈

Chingim

2018-02-14 11:14:26 +08:00 via Android

纯 css 的话，在搜索图标上放一个 z-index 比较大的 checkbox，opacity 设置为 0。利用:checked 状态改写输入框的样式

缺点是点击其他地方没法收起输入框

xiaody

2018-02-14 11:17:01 +08:00

http://jsbin.com/jiqixuh/5/edit?html,css,output

UnluckyNinja

2018-02-14 11:30:43 +08:00

这不就是 MD 里导航栏搜索按钮吗…… https://getmdl.io/components/index.html#layout-section 这里也有个例子，看起来是 JS 实现的，搜相关关键字应该也很容易搜到其他例子

UnluckyNinja

2018-02-14 11:40:16 +08:00

BTW medium 这个应该是纯 CSS 的，元素没绑定任何鼠标事件

ImJoeHs

2018-02-14 14:50:14 +08:00

1. label for + 2. focus 伪类 + 3. transition

rogwan

2018-02-14 15:23:56 +08:00 via Android

搜索直接搜（ Google.com 那种），和搜索框点一下再 input 搜，是本质区别。两此点击怎么搞，都是表面功夫，很不爽

rogwan

2018-02-14 15:25:53 +08:00 via Android

宁可表单框小一点，直接搜的体验好多了，现在不知道怎么搞的，都是搜索图标，点击才能搜。可能是移动 APP 化的原因吧，顶部空间不够

lianxiben

2018-02-14 18:13:53 +08:00

这个实现给放大镜绑定一个事件就可以了吧。。。

zhwithsweet

2018-02-14 23:02:12 +08:00

transformX(90%), transition all .5s
js
方向 target = false
@click transformX(0)； target = false else targetformx(90%) target = true

Telegram

2018-02-16 12:18:45 +08:00 via iPhone

围观一群前端大佬