如何构建CSS3可扩展搜索表单？

Question

我想在悬停时使图标的顶部边框和输入的上边框位于同一行。但我无法弄清楚如何正确地做到这一点。运行代码段以查看问题（将鼠标悬停在搜索图标上）。

/* SEARCH */

.srchwrapper {
  float: left;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1.2%;
}

.search-container *,
.search-container *:after,
.search-container *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


/* search bar focus */

.search-container *:focus {
  background: #fbfbfb;
  color: black;
  outline: 0;
}


/* search bar container */

.search-container {
  display: table;
  position: relative;
  width: 51px;
  float: left;
}


/* search icon button */

.search-icon-btn {
  background-color: white;
  display: table-cell;
  height: 33px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 50px;
  z-index: 1;
}


/* search bar input container */

.search-input {
  position: absolute;
  left: 0;
  z-index: 0;
}


/* search bar input */

.search-input input.search-bar {
  height: 35px;
  padding: 0px;
  width: 50px;
}

.search-input input.search-bar:focus {
  padding-left: 60px;
  padding-right: 10px;
  width: 200px;
}


/* transition effect */

.search-input input.search-bar,
.search-icon-btn {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}


/* hover on search bar container */

.search-container:hover>.search-input input.search-bar {
  padding-left: 60px;
  padding-right: 10px;
  width: 200px;
  border: 2px solid black;
}

.search-container:hover {
  background-color: grey;
  border: 2px solid black;
}

.navlinkborder {
  background-color: limegreen;
  padding: 10px;
  border-radius: 3px;
}

.navlinkborder:hover {
  background-color: green;
  color: white;
  transition: .5s;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<div class="srchwrapper">
  <div class="search-container">
    <div class="search-icon-btn">
      <i class="fa fa-search fa-lg"></i>
    </div>
    <div class="search-input">
      <input type="search" class="search-bar" placeholder="Hľadať...">
    </div>
  </div>
</div>

Answer 1

这是开始使用的最小flexbox布局：

＆＃13;

＆＃13;

.search-container {
  display: flex;
  width: 20px;
  padding: 4px;
  border: 2px solid;
  transition: width .2s;
  overflow: hidden;
}

.search-container:hover {
  width: 200px;
}

.search-input {
  flex: 1;
  display: flex;
}

.search-input input {
  flex: 1;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: none;
  border: 0;
  padding: 0;
  outline: 0;
  margin-left: 4px;
}

＆＃13;

<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<div class="search-container">
  <div class="search-icon-btn">
    <i class="fa fa-search fa-lg"></i>
  </div>
  <div class="search-input">
    <input type="search" class="search-bar" placeholder="Hľadať...">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;