Bootstrap3 / CSS3 - 样式Google自定义搜索引擎

Question

您能否告诉我如何在我的网站上设置Google自定义搜索栏的样式。是否可以使用css3和bootstrap3设置样式，如下图所示？非常感谢您的帮助。

Answer 1

试试这个。

HTML部分：

<div class="container">
    <div class="col-md-3">
      <form class="navbar-form" role="search">
          <div class="input-group add-on">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
              <div class="input-group-btn">
                  <button class="btn btn-default btnSubmit" type="submit" >
                      <i class="glyphicon glyphicon-search"></i>
                  </button>
              </div>
          </div>
       </form>
    </div>
</div>

CSS部分：

.add-on .input-group-btn > .btn {
    border-left-width:0;left:-2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* stop the glowing blue shadow */
.add-on .form-control:focus {
    box-shadow:none;
    -webkit-box-shadow:none; 
    border-color:#cccccc; 
}

.btnSubmit {
    background: #FDD017;
}

工作DEMO