Bootstrap-Auswahloption Dropdown-Pfeil nach unten wird nicht angezeigt

Ich verwende das Bootstrap-Select-Optionsfeld mit der Klasse form-control

Hier ist mein Code:

<select class="form-control" onchange="location = this.value;">
            <option>Select a Generic Name</option>
            <option value="1">Title 1</option>
            <option value="2">Title 2</option>
 </select>

Aber in der Dropdown-Option wird das Abwärtspfeilsymbol nicht angezeigt

CSS:

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

Was ist das Hauptproblem bei der Anzeige dieses Symbols?

Wenn Sie Bootstrap v5 verwenden, hat sich das Tag in geändert

<select class="form-select">

Ich hatte das gleiche Problem mit dem Bootstrap-Select-Feld. Hier ist eine einfache Klasse, die das Problem definitiv löst.

Hinzufügen Formularauswahl Klasse neben Formularkontrolle Klasse.

<select class="form-control form-select">
    <option>Select a Generic Name</option>
    <option value="1">Title 1</option>
    <option value="2">Title 2</option>
 </select>

Bei mir hat es auf folgende Weise funktioniert: (Die folgende Bearbeitung hat das Problem in Chrome behoben.)

select.form-control { -webkit-appearance: menulist; }

Hallo, ich versuche, dieses Problem mit Ihrem Beispielcode zu reproduzieren.
Aber ich hatte im Ergebnis kein Problem mit dem fehlenden Pfeil.

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

<select class="form-control" onchange="location = this.value;">
            <option>Select a Generic Name</option>
            <option value="1">Title 1</option>
            <option value="2">Title 2</option>
 </select>

Notiz:
Stellen Sie sicher, dass das folgende CSS nicht für das Auswahl-Dropdown verwendet wird.

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

Hoffe es wird hilfreich sein.

Ich hatte das gleiche Problem mit dem Bootstrap-Select-Feld. Hier ist eine einfache Klasse, die das Problem definitiv löst.

Hinzufügen benutzerdefiniert auswählen Klasse neben Formularkontrolle Klasse.

  <select class="form-control custom-select">
        <option>Select a Generic Name</option>
        <option value="1">Title 1</option>
        <option value="2">Title 2</option>
     </select>

Es wird ein angezeigt Pfeilnotationdie je nach Aussehen abweichen können Browser und Betriebssystem du benutzt.

Elemente mit “Formularkontrolle” Klasse haben eine “Aussehen” Eigenschaft gesetzt auf ‘keiner’ standardmäßig. Wenn Sie also Caret (Dropdown-Symbol) für ausgewählte Tags in Bootstrap anzeigen möchten, müssen Sie dies tun überschreiben STIEFELRIEMEN Stile mit untenstehendem CSS.

select.form-control{
    -webkit-appearance: menulist!important;
    -moz-appearance: menulist!important;
    -ms-appearance: menulist!important;
    -o-appearance: menulist!important;
    appearance: menulist!important;
}

<!--CDNs of External Libraries to load bootstrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!--Select Tag in html-->
<select class="form-control">
  <option value="">Select Option</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
  <option value="Option 5">Option 5</option>
</select>