html - 在 bootstrap 3 中自定义输入组内的输入框和按钮宽度

Question

<分区>

Answer 1

纯 CSS。

#search-form .form-control,
#search-form .form-control:focus,
#search-form .form-control:hover {
  height: 50px;
  border-right: none;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  outline: none;
  box-shadow: none;
  left: 20px;
  margin-top: -1px;
}
/**/

#search-form button.btn.btn-orange,
#search-form button.btn.btn-orange:hover,
#search-form button.btn.btn-orange:focus {
  position: relative;
  height: 50px;
  width: 175px;
  color: white;
  background: none;
  font-size: 20px;
  text-align: left;
  margin-left: 15px;
  outline: none;
  box-shadow: none;
  border: none;
}
#search-form button.btn.btn-orange:before,
#search-form button.btn.btn-orange:after {
  position: absolute;
  content: '';
  top: -1px;
  height: 50px;
  width: 55%;
  background: #DC521F;
  z-index: -1;
}
#search-form button.btn.btn-orange:before {
  left: -15px;
  border-radius: 0;
  border-right: none;
  transform: skew(20deg);
  transform-origin: top left;
}
#search-form button.btn.btn-orange:after {
  right: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form id="search-form">
  <div class="container">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
                <button class="btn btn-orange" type="button">
                    <span class="glyphicon glyphicon-search">
                    </span>

      </button>
      </span>
    </div>
  </div>
</form>
<hr>