Bootstrap3/CSS3 - 風格谷歌自定義搜索引擎

-1

您可以請給我建議如何風格谷歌自定義搜索欄在我的網站上。是否可以使用css3和bootstrap3來設置它，如下圖所示？非常感謝您的幫助。Bootstrap3/CSS3 - 風格谷歌自定義搜索引擎

MySearchbar/CSS3/Bootstrap3

2015-04-02 user3105439

並不難，但如果你不知道什麼CSS，我讀了書或教程。你知道如何使用bootstrap嗎？如果沒有，那將是你的第一步。上面的內容就像一個表單組，並在右側添加一個圖標。然後爲圖標部分定義一個自定義類，並在你的css中定義它。 – dcclassics 2015-04-02 12:31:23

@dcclassics我知道CSS3和Bootstrap3類，我只是不知道如何風格谷歌自定義搜索欄看起來像我上面的圖片。有教程或什麼？謝謝 – user3105439 2015-04-02 12:36:00

http://jsfiddle.net/7ujrrmch/這應該讓你開始。 – dcclassics 2015-04-02 13:50:57

試試這個。

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

來源

2015-04-02 13:18:54

Bootstrap3/CSS3 - 風格谷歌自定義搜索引擎

回答

相關問題