制作一个简单但现代的搜索栏

Question

我想要创建一个简单的搜索栏，没有太多的定制。我只想要一个搜索输入，搜索图标和--它应该很小，当我单击它时，它会增加大小(类似于只看到图标，当我单击输入时会出现在动画中。

到目前为止，我只做到了这一点，我被困住了，因为我不能对齐一切。

有人能帮我吗?/

.row {
background-color: black;
}

.stylish-input-group .input-group-addon{
    background: white !important;
}
.stylish-input-group .form-control{
    border-right:0;
    box-shadow:0 0 0;
    border-color:#ccc;
}
.stylish-input-group {
    width: 20% !important;
}
.stylish-input-group span {
    border: 0 !important;
    align-items: center;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="row">
<div class="input-group stylish-input-group input-append">
  <input type="text" class="form-control" placeholder="Search" style="
    border-radius: 5px;
">
  <span class="input-group-addon"><button type="submit"><span class="fa fa-search"></span></button>
  </span>
</div>
</div>

​

Answer 1

这是一个新的片段，只需很少的努力就可以使用引导。试一试。

​

#search {
  float: right;
  margin-top: 9px;
  width: 250px;
}

.search {
  padding: 5px 0;
  width: 230px;
  height: 30px;
  position: relative;
  left: 10px;
  float: left;
  line-height: 22px;
}

.search input {
  position: absolute;
  width: 0px;
  float: Left;
  margin-left: 210px;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  height: 30px;
  line-height: 18px;
  padding: 0 2px 0 2px;
  border-radius: 1px;
}

.search:hover input,
.search input:focus {
  width: 200px;
  margin-left: 0px;
}

.btn {
  height: 30px;
  position: absolute;
  right: 0;
  top: 5px;
  border-radius: 1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="search">
      <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
      <button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search"></span></button>
    </div>
  </div>
</div>

​