Dropdown-Pfeile in den Auswahlfeldern werden nicht angezeigt

Ich verwende ein WordPress-Theme und aus irgendeinem Grund das HTML select Elemente sehen aus wie schlicht input Felder; Wenn Sie jedoch darauf klicken, können Sie die Dropdown-Liste sehen.

Ich kann nicht finden, welcher Code die Dropdown-Pfeile entfernen könnte.

Folgendes ist das, was ich im CSS sehen kann.

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0; 
border-radius: 0; 
}

Das Folgende ist ein grundlegendes Auswahlelement mit seinen Optionen.

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

Lassen Sie uns nun sehen, wo Ihr Problem liegt:

select {
  /*webkit browsers */
  -webkit-appearance: none;
  /*Firefox */
  -moz-appearance: none;
  /* modern browsers */
  appearance: none;
  border-radius: 0;

}

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

Wenn Sie einstellen none Zu appearance Sie entfernen den Pfeil, und wenn Sie festlegen 0 Zu border-radius du entfernst die border des select standardmäßig.

Sie können den Pfeil wiederherstellen, indem Sie das einstellen appearance Zu menulist (dh der Standardwert) oder listbox oder auto.

Hinweis: Wenn Sie mit dieser Regel den Pfeil im IE versteckt haben select::-ms-expand { display: none; }dann müsstest du es einstellen display: block um den Pfeil zurück zu bekommen.

Sie haben die überschrieben -webkit-appearance Eigentum für selectdessen Standardwert auf festgelegt ist -webkit-appearance: menulist; von vielen Browsern.

Ich weiß, dass ich diese Frage spät beantworte, aber meine folgende CSS-Lösung hat für mich funktioniert.

Es kann für jemand anderen hilfreich sein.

select {
-webkit-appearance: listbox !important;
}

Sie können die wickeln select in einem div und darauf div du kannst Geben ::after Element und Stil:

div:after{
    position: absolute;
    top: 4px;
    right: 10px;
    color: #768093;
    font-family: #whichever font you wanna use# e.g Fontawesome;
    font-size: 20px;
    content: "\e842";
}

div:after{ 
    position: absolute;
    visibility: visible;
    font-family: FontAwesome;
    content: "\f096";
    font-size: 18px;
}

Die gewählte Antwort ist für die meisten richtig, aber sie hat bei mir nicht funktioniert. Die folgende Codezeile hat es jedoch geschafft.

select::-ms-expand { display: block; }

Ich habe die oben genannten Lösungen ausprobiert, aber es funktionierte nicht für die Benutzeroberfläche, die mit erstellt wurde jquery.min.css. Ich habe es unten mit CSS versucht und es hat mein Problem gelöst. Hier ziele ich .ui-icon-carat-ddas dort den Dropdown-Pfeil und das Einstellungs-Dropdown-Symbol anzeigte:

.ui-icon-carat-d:after{
    background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
}

Ich hatte auch das gleiche Problem, habe den Dropdown-Pfeil bekommen, nachdem ich die folgende jquery-Datei jquery-3.4.1.js hinzugefügt habe

<script type="text/javascript" src="https://stackoverflow.com/questions/31417160/~/Scripts/jquery-3.4.1.js">