javascript - 如何在 css 中点击搜索图标时扩展小方 block 输入框？

Question

我有一个搜索栏，在最左边有一个搜索图标，如此处所示 fiddle 在下面的屏幕截图中。

我用来制作搜索图标和方形边框的 HTML 和 CSS 代码是:

HTML:

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

CSS:

.back{
  padding: 0.5%;
  background: #10314c;

}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now {
    width: 50%;
}

问题陈述:

如果我点击搜索图标，搜索图标周围的小方 block 输入框(在屏幕截图中用箭头标记)应该展开类似于here。 .

这是我更新的 fiddle这几乎是正确的但是这两件事我无法弄清楚如何去做:

• 方框在撞到外面的任何地方后应该回到原来的位置。
• 当白色方形边框展开时，内部背景应为白色。

关于如何做到这一点有什么想法吗？

Answer 1

这是更新的 fiddle link

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   pointer-events:none; /*Add this to ur css*/
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand:focus {
  width: 50%;
  background: white;
}
.extand:focus + span{  /*hide icon*/
  display:none;
}

无需添加 javascript。点击input，它会得到focused，可以在css中使用它来定位它并为其添加宽度，当你点击外部时，输入会失去焦点并返回到原始大小