使用Twitter的下拉選擇選項的輸入文本框引導

-1

我一直在試圖找到一個輸入框，使用引導選擇下拉菜單。我發現，你可以使用http://v4-alpha.getbootstrap.com/components/input-group/使用Twitter的下拉選擇選項的輸入文本框引導

<div class="input-group"> 
    <input type="text" class="form-control" aria-label="Text input with dropdown button"> 
    <div class="input-group-btn"> 
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     Action 
    </button> 
    <div class="dropdown-menu dropdown-menu-right"> 
     <a class="dropdown-item" href="#">Action</a> 
     <a class="dropdown-item" href="#">Another action</a> 
     <a class="dropdown-item" href="#">Something else here</a> 
     <div role="separator" class="dropdown-divider"></div> 
     <a class="dropdown-item" href="#">Separated link</a> 
    </div> 
    </div> 
</div>

這工作，但不是我想要實現達到同樣的目光。 eBay正是我正在尋找的東西，但沒有什麼是我可以找到的http://bulksell.ebay.com/ws/eBayISAPI.dll?ListingTemplate&mode=AddItem

它只是一個帶有向右拉的箭頭的文本框，並有一個下拉列表。它沒有像上面代碼中所示的輸入插件或分隔符。

這怎麼能用bootstrap來完成？

來源

2016-09-28 user2680614

您的鏈接需要登錄才能看到，但我相信您要查找的內容可能是預先輸入或select2。檢查https://twitter.github.io/typeahead.js/examples/和https://select2.github.io/examples.html – ruedamanuel

瀏覽器和操作系統在大多數情況下決定了選擇框的樣式，並且幾乎不可能用CSS單獨修改它們。你必須考慮更換方法。主要技巧是應用appearance: none，它可以讓你覆蓋一些樣式。

我最喜歡的方法是這樣的一個：

<label> 
    <select> 
     <option selected> Select Box </option> 
     <option>Short Option</option> 
     <option>This Is A Longer Option</option> 
    </select> 
</label> 

body, html {background:#444; text-align:center; padding:50px 0;} 

/* The CSS */ 
select { 
    padding:3px; 
    margin: 0; 
    -webkit-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px; 
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    background: #f8f8f8; 
    color:#888; 
    border:none; 
    outline:none; 
    display: inline-block; 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    appearance:none; 
    cursor:pointer; 
} 

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select {padding-right:18px} 
} 

label {position:relative} 
label:after { 
    content:'<>'; 
    font:11px "Consolas", monospace; 
    color:#aaa; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
    right:8px; top:2px; 
    padding:0 0 2px; 
    border-bottom:1px solid #ddd; 
    position:absolute; 
    pointer-events:none; 
} 
label:before { 
    content:''; 
    right:6px; top:0px; 
    width:20px; height:20px; 
    background:#f8f8f8; 
    position:absolute; 
    pointer-events:none; 
    display:block; 
}

我覺得沒有下拉菜單的默認樣式自舉。

來源

2016-09-28 22:33:32

使用Twitter的下拉選擇選項的輸入文本框引導

回答

相關問題