Bootstrap3 / CSS3 - スタイルGoogleカスタム検索エンジン - javascript、html5、css3、twitter-bootstrap-3、google-custom-search

私のWebisteでGoogleカスタム検索バーのスタイルを設定する方法についてアドバイスをいただけますか。下の画像のように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パート：

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

作業 デモ