Question

这是我的代码。

render()

JsFiddle演示：http://jsfiddle.net/jaribhai/wncwqerj/4/

所以这是一个有效的搜索栏。我想要做的是它在桌面设备中仍然可见，并且可以在像这样的移动设备中扩展。

http://callmenick.com/_development/expanding-search-bar/

我认为如果不使用Jquery，这是不可能的，所以有人告诉我如何才能实现这一功能。感谢

Answer 1

一种方法是使用程式化的复选框来控制搜索输入的状态。

使用关联标签对复选框进行样式化，以显示搜索图标。使用媒体查询并根据复选框的:checked状态显示或隐藏搜索输入。

演示小提琴：https://jsfiddle.net/abhitalks/ott3Lt78/

演示代码段

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
.srch { margin: 8px; }
.srch > label {
  display: inline-block; text-align: center;
  width: 32px; height: 32px; line-height: 32px;
  background-color: #33d; color: #eee;
  cursor: pointer; vertical-align: middle;
}
.srch > label+input { display: none; }
.srch > input[type=text] {
  display: inline-block; height: 32px; width: 240px; padding: 4px;
  border: 1px solid #33d; transition: width 0.5s;
}

@media screen and (max-width: 700px) {
  .srch > input[type=text] { 
    width: 0; border-width: 0px; padding: 0px;
  }
  .srch > input[type=checkbox]:checked + input { 
    width: 240px; border-width: 1px; padding: 4px;
  }
}

＆＃13;

<div class="srch">
  <label for='chk'>&#128270;</label>
  <input id='chk' type='checkbox' />
  <input type="text" placeholder="search videos" />
</div>

＆＃13;

搜索栏在桌面中可见并且可在移动设备中扩展

1 个答案: