Eingabefeld mit Dropdown-Optionen unter Verwendung von Twitter Bootstrap

Question

Ich habe versucht, ein Eingabefeld zu finden, das eine Dropdown-Auswahl mit Bootstrap hat. Ich fand, dass Sie ein ähnliches Aussehen erreichen können http://v4-alpha.getbootstrap.com/components/input-group/

<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> 

Dies funktioniert mit, ist aber nicht das, was ich versuche zu erreichen. eBay hat genau das, was ich suchte, aber es gibt nichts, das ich so finden kann http://bulksell.ebay.com/ws/eBayISAPI.dll?ListingTemplate&mode=AddItem

Es ist einfach ein Textfeld mit einem Pfeil, der nach rechts gezogen wird und eine Dropdown-Liste hat. Es hat kein Input-Addon oder Divider wie im obigen Code gezeigt.

Wie kann dies mit Bootstrap getan werden?

Answer 1

In den meisten Fällen bestimmen Browser und Betriebssysteme den Stil der Auswahlfelder, und es ist nahezu unmöglich, sie nur mit CSS zu ändern. Sie müssen nach Ersatzmethoden suchen. Der Haupttrick besteht darin, appearance: none anzuwenden, mit dem Sie etwas vom Styling überschreiben können.

Meine Lieblingsmethode ist diese:

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

Ich denke, es gibt keinen Drop-Down-Standardstil in Bootstrap.