这是 Medium 的搜索按钮,这几天在家自己捣鼓博客主题,想换这种搜索按钮,但是不知道如何实现,没有思路。
请大家帮帮忙。
1
loading 2018-02-14 10:52:15 +08:00 via Android 2
放大镜是一个元素,绑定了点击事件,然后更改输入框宽度。
当然,有更优雅的方式吧。 |
2
a570295535 2018-02-14 10:52:47 +08:00 1
设置默认隐藏,js 点击显示 /隐藏啊
|
3
dibage 2018-02-14 10:53:12 +08:00 1
图标用的应该是字体图标,然后实现逻辑很简单:
点击搜索按钮(搜索按钮是一个 div,长度假设为 50px,点击后,设置长度为 300px,(假设)) 可以通过 js 和 css 实现,搜索按钮后边的输入框是隐藏的,点击后向左展开显示,然后 focus 了 应该很简单吧。。认真脸 |
4
xubeiyan 2018-02-14 10:53:23 +08:00 via Android 1
就是搜索图标绑定个点击事件,使隐藏的 input 显示,并焦点聚集,input 失焦则隐藏它
|
5
xinhangliu OP |
6
loading 2018-02-14 11:02:16 +08:00 via Android
应该可以纯 css。我还在摸鱼。
|
7
snarkprayer 2018-02-14 11:06:08 +08:00 1
|
8
jin5354 2018-02-14 11:07:08 +08:00 3
纯 css 可以用 label + input + : checked 实现
|
9
snarkprayer 2018-02-14 11:08:16 +08:00
@xinhangliu 纯 css 方式你可以搜索 单复选框元素显隐技术
|
10
snarkprayer 2018-02-14 11:11:24 +08:00
我更正下....
点击图标直接给了 input:focus 状态,input:focus 下宽度变化了.... |
11
jin5354 2018-02-14 11:11:42 +08:00
上面写错了 单选复选框用 :checked 文本输入框用 :focus 哈
|
12
Chingim 2018-02-14 11:14:26 +08:00 via Android 1
纯 css 的话,在搜索图标上放一个 z-index 比较大的 checkbox,opacity 设置为 0。利用:checked 状态改写输入框的样式
缺点是点击其他地方没法收起输入框 |
13
xiaody 2018-02-14 11:17:01 +08:00 1
|
14
UnluckyNinja 2018-02-14 11:30:43 +08:00 1
这不就是 MD 里导航栏搜索按钮吗…… https://getmdl.io/components/index.html#layout-section 这里也有个例子,看起来是 JS 实现的,搜相关关键字应该也很容易搜到其他例子
|
15
UnluckyNinja 2018-02-14 11:40:16 +08:00
BTW medium 这个应该是纯 CSS 的,元素没绑定任何鼠标事件
|
16
ImJoeHs 2018-02-14 14:50:14 +08:00 1
1. label for + 2. focus 伪类 + 3. transition
|
17
rogwan 2018-02-14 15:23:56 +08:00 via Android 3
搜索直接搜( Google.com 那种),和搜索框点一下再 input 搜,是本质区别。两此点击怎么搞,都是表面功夫,很不爽
|
18
rogwan 2018-02-14 15:25:53 +08:00 via Android
宁可表单框小一点,直接搜的体验好多了,现在不知道怎么搞的,都是搜索图标,点击才能搜。可能是移动 APP 化的原因吧,顶部空间不够
|
19
lianxiben 2018-02-14 18:13:53 +08:00 1
这个实现给放大镜绑定一个事件就可以了吧。。。
|
20
zhwithsweet 2018-02-14 23:02:12 +08:00 1
transformX(90%), transition all .5s
js 方向 target = false @click transformX(0); target = false else targetformx(90%) target = true |
21
Telegram 2018-02-16 12:18:45 +08:00 via iPhone
围观一群前端大佬
|