CSS search input

by jorgeherrera

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form class="navbar-form tramite-search" role="search">
  <div class="input-group input-group-sm">
    <input type="text" id="search" class="form-control" placeholder="Search&hellip;">
    <span class="input-group-btn">
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
    </span>
  </div>
</form>

CSS

.tramite-search > .input-group {
  position: relative;
}

.tramite-search > .input-group > .form-control {
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  width: 34px;
  z-index: 20;
}

.tramite-search > .input-group > .form-control:focus {
  cursor: text;
  opacity: 1;
  /* padding-right: 100px; */
  width: 200px;
}

.tramite-search > .input-group > .input-group-btn {
  position: absolute;
  right: 31px;
  z-index: 10;
}
.form-control:focus + .input-group-btn {
  right: 31px;
  z-index: 30;
}