結合輸入前置和輸入追加形式搜索

Question

我使用bootstrap爲我的網站造型。

我發現，這樣做的時候：

<form class="form-search navbar-search pull-right"> 
       <div class="input-append input-prepend"> 
        <span class="add-on"><i class="icon-search"></i></span> 
        <input id="searchQuery" class="search-query" type="search" placeholder="Rechercher" /> 
        <a class="btn add-on" href="#">Rechercher</a> 
       </div> 

輸入文本框仍然環繞在左側。

.form-search .input-append .search-query, 
.form-search .input-prepend .search-query { 
-webkit-border-radius: 0; 
-moz-border-radius: 0; 
     border-radius: 0; 

}

我是不是做錯了什麼：看CSS時不應該如此嗎？

Answer 1

與你的類 '.search查詢' 問題

是由風格..

.form-search .input-prepend .search-query { 
    border-radius: 0 14px 14px 0; 
} 

刪除搜索查詢類

Answer 2

您可以創建通過以下方式形式：

的jsfiddle Demo

<form class="form-search navbar-search pull-right"> 
<div class="input-append input-prepend"> <span class="add-on"><i class="icon-search"></i></span> 

<input id="searchQuery" type="search" placeholder="Rechercher" /> <div class="btn-group"> 
      <button class="btn">Rechercher</button> 

      </div> 

    </form> 

他們已經邊界半徑0定義，因此不需要額外的類，以用於輸入設置border-連接半徑0：

.input-prepend.input-append input, .input-prepend.input-append select, .input-prepend.input-append .uneditable-input { 

border-radius: 0 0 0 0; 

    }