Javascript Bootstrap3/CSS3-风格的谷歌定制搜索引擎

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

试试这个

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一无所知，我会读一本书或一本教程。你知道如何使用引导程序吗？如果没有，那将是你的第一步。上述内容类似于一个表单组，并在右侧部分添加一个图标。然后为图标部分定义一个自定义类，并在css中定义它。@dcs我知道CSS3和Bootstrap3类，我只是不知道如何设置google自定义搜索栏的样式，使其看起来与上面的图片相同。有教程什么的吗？谢谢，这会让你开始的。

.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;
}