Design Eingabe in Bootstrap auswählen

Question

Was ich suche ist, ob es ein Bootstrap-Modell in Select-Eingabe gibt, die den Pfeil + Hintergrund auf der rechten Seite hat.

link

CODE HTML:

<div class="bootstrap-select input-group "> 
    <input type="text" autocomplete="off" name="my_select_label" class="form-control "> 
    <input type="hidden" name="my_select" value=""> 
    <div class="input-group-btn open"> 
    <button tabindex="-1" type="button" class="btn btn-warning dropdown-toggle active"> 
     <span class="caret"></span> 
    </button> 
    <ul tabindex="-1" class="pull-right dropdown-menu warning"> 
     <li class="active"> 
     <a tabindex="-1" href=""></a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Hydrogen">Hydrogen</a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Helium">Helium</a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Lithium">Lithium</a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Beryllium">Beryllium</a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Boron">Boron</a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Carbon">Carbon</a> 
     </li> 
     <li> 
     <a tabindex="-1" href="Nitrogen">Nitrogen</a> 
     </li> 
    </ul> 
    </div> 
</div> 

ich dieses Modell finden geschafft hat aber zwei Probleme:

1.is immer offen ... nicht klicken

2. Ich möchte eine Struktur wie die folgende haben ... (ist derzeit die Typenliste)

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

Kennt jemand ein Beispiel, das die obige Bedingung erfüllt?

Vielen Dank im Voraus!

Answer 1

Ich denke, vielleicht hat jemand eine bessere Art und Weise haben, aber in der Zwischenzeit können Sie versuchen, zu verwenden: vor wie dieser

HTML

<div class="container"> 
    <div class="col-xs-6 mySelect"> 
     <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
     </select>  
    </div> 
</div> 

CSS

.mySelect {position: relative} 
.mySelect select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background-color:transparent; 
    position:relative; 
    z-index:5; 
} 
.mySelect:before { 
    content: "\f078"; 
    font-family: FontAwesome; 
    font-size:16px; 
    width: 34px; 
    height: 34px; 
    position: absolute; 
    top:0; 
    right:15px; 
    background-color:orange; 
    border-radius:0 4px 4px 0; 
    line-height:34px; 
    text-align:center; 
    color:white; 
} 

Demo

Answer 2

http://getbootstrap.com/components/#btn-dropdowns

Ich wundere mich, dass Sie die jquery CDN in Ihren Quellcode auf dem <Kopf> Tag importieren?

Es kann einige Probleme geben, wenn Sie jQuery nicht auf Ihrer Site importieren.

Und Sie sollten Ihre < Schaltfläche > Tags in wie diesen Code bearbeiten.

<button tabindex="-1" type="button" class="btn btn-warning dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 

Für das 2 Problem, kann dies Ihnen helfen.

https://silviomoreto.github.io/bootstrap-select/