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

[xinhangliu]

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

请大家帮帮忙。

[loading]

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

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

[a570295535]

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

[dibage]

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

应该很简单吧。。认真脸

[xubeiyan]

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

[xinhangliu]

@loading
@a570295535

这能用纯 CSS 实现吗？

[loading]

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

[snarkprayer]

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

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

[jin5354]

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

[snarkprayer]

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

[snarkprayer]

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

[jin5354]

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

[Chingim]

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

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

[xiaody]

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

[UnluckyNinja]

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

[UnluckyNinja]

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

[ImJoeHs]

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

[rogwan]

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

[rogwan]

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

[lianxiben]

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

[zhwithsweet]

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