Bootstrap3 CSS風格輸入

Question

我正在嘗試使用內部下拉菜單進行搜索。我一直試圖使用引導程序的輸入組來給出這個按鈕在場內的錯覺。

這就是我想在下面的截圖來完成：

這是我到目前爲止有：

我試圖找出如何讓下拉菜單移動到搜索字段的最右側，並顯示該胡蘿蔔。

有關調整菜單位置以及使下拉按鈕在懸停時沒有顏色的任何提示？

<div class="container div-cntr"> 
    <div class="form-group"> 
     <div class="input-group"> 
     <input type="text" class="form-control input-lg" id="toolSearch" name="toolSearch" placeholder="What are you looking for?"> 
     <div class="input-group-btn"> 
      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> 
      <ul class="dropdown-menu"> 
       <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li> 
       <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li> 
      </ul> 
     </div> 
     </div> 
     <br /> 
     <button type="button" class="btn btn-default btn-lg">Search</button> 
    </div> 
</div> 

-

.div-cntr { 
    left: 50%; 
    margin-left: -350px; 
    margin-top: -150px; 
    min-height: 150px; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    width: 700px; 
} 
.filterOptions{ 
    border-left: 0px; 
} 
.btn-lg { 
    line-height: 1.22; 
} 
#toolSearch:focus { 
    outline:none; 
} 

這裏是我已成立了一個小提琴：https://jsfiddle.net/carlhussey/tfrpncu7/

Answer 1

以下是你需要完成你指出你所想要的CSS：

.dropdown-menu { 
    right: 0; /* Align dropdown-menu to right instead of left */ 
    left: auto; 
} 

.input-group .dropdown-toggle.filterOptions { 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */ 
} 

.dropdown-menu>li>a:focus, 
.dropdown-menu>li>a:hover { 
    background-color: transparent; /* Fix for dropdown-menu item hover background-color */ 
} 

這裏是什麼樣子：

我繼續更新您的小提琴：

https://jsfiddle.net/tfrpncu7/3/

Answer 2

這裏有下拉集的位置，並用白色背景上`按鈕一個小提琴：活性'。讓我知道這是你在找什麼。

https://jsfiddle.net/tobyl/4p41p3kg/2/

新增CSS：

.dropdown-menu { 
    left: auto; 
    right: 0; 
} 

.open > .dropdown-toggle.btn-default:active, .open > .dropdown-toggle.btn-default:focus { 
    background-color: #fff; 
} 

Answer 3

我會回答你的問題

的第二部分是製作下拉按鈕，開始對懸停沒有顏色

Chrome開發工具（右鍵單擊頁面中的任何元素並選擇Inspect element）可以在確定某些樣式元素時有所幫助狀態（如懸停）。查看在懸停期間應用哪個樣式規則we can force the hover state on the button through dev-tools。我們看到，.btn-default正在申請

.btn-default:hover { 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #adadad; 
} 

由於這個按鈕有下列類優先 <button class="btn btn-default btn-lg dropdown-toggle filterOptions">（從班班向右覆蓋規則左側） 我們可以做一個規則重寫hover樣式的.btn-default懸停狀態爲filterOptions。

.filterOptions:hover { 
    background-color: white; 
    border-color: #ccc; 
} 

調整菜單的位置以及

再次通過檢查開發工具下拉元素，我們可以看出，正確的樣式規則來替代默認的定位，使下拉位置向右是：

.open>.dropdown-menu { 
    right: 0; 
    left: initial; 
} 

更新小提琴： https://jsfiddle.net/tfrpncu7/4/

請記住，css並沒有設定範圍，所以在樣式化特定元素時總是應用新的非引導類是個好主意。 如果您的項目很大，請考慮使用像BEM這樣的css命名約定來降低命名衝突的風險。

Answer 4

您應該使用input-group-lg以及input-group和dropdown-menu-right正確放置下拉菜單。對於其他CSS使用pseudo elements。

工作實例：（特異性的水平是如此的例子工程＃2）

.div-cntr { 
 
    margin-top: 100px; 
 
    text-align: center; 
 
    max-width: 700px; 
 
    /*for example only*/ 
 
    background: red; 
 
    min-height: 300px; 
 
    /*for example only*/ 
 
} 
 
.form .open>.dropdown-toggle.filterOptions.focus, 
 
.form .open>.dropdown-toggle.filterOptions:focus, 
 
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control, 
 
.form .input-group.input-group-lg>.input-group-btn>.filterOptions { 
 
    border: 1px solid #ccc; 
 
    border-left: 0; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    background: #fff; 
 
} 
 
.form .dropdown-menu.dropdown-menu-search { 
 
    top: 60px; 
 
    right: 110px; 
 
    border-radius: 0; 
 
    border: 0; 
 
    background: #fff; 
 
} 
 
.form .dropdown-menu.dropdown-menu-search:after { 
 
    top: -15px; 
 
    right: 10px; 
 
    position: absolute; 
 
    content: ''; 
 
    border-width: 0px 15px 15px 15px; 
 
    border-style: solid; 
 
    border-color: #fff transparent; 
 
    height: 0; 
 
    width: 0; 
 
} 
 
.form .form-control.toolSearch, 
 
.form .form-control.toolSearch:focus { 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    border: 1px solid #ccc; 
 
    border-right: 0; 
 
} 
 
.form .input-group-btn .btn.btn-search, 
 
.form .input-group-btn .btn.btn-search.active { 
 
    border-radius: 0; 
 
    border: 1px solid #ccc; 
 
    border-left: 0; 
 
} 
 
.form .input-group-btn .btn.btn-search:hover, 
 
.form .input-group-btn .btn-search:focus { 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border: 1px solid #ccc; 
 
    border-left: 0; 
 
    border-radius: 0; 
 
    background: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container div-cntr"> 
 
    <div class="form-group form"> 
 
    <div class="input-group input-group-lg"> 
 
     <input type="text" class="form-control toolSearch" id="toolSearch" name="toolSearch" placeholder="What are you looking for?"> 
 
     <div class="input-group-btn"> 
 
     <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right dropdown-menu-search"> 
 
      <li> 
 
      <a href="#" class="small" data-value="option1" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 1</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option2" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 2</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option3" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 3</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option4" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 4</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option5" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 5</a> 
 
      </li> 
 
      <li> 
 
      <a href="#" class="small" data-value="option6" tabIndex="-1"> 
 
       <input type="checkbox" />&nbsp;Option 6</a> 
 
      </li> 
 
     </ul> 
 
     <button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>