wake-up-neo.net

Dropdown-Pfeil in Auswahlfeldern, die nicht angezeigt werden

Ich verwende ein WordPress-Theme und aus irgendeinem Grund haben die HTML-Variablen select keinen Dropdown-Bereich. Sie sehen aus wie einfache input-Textfelder, wenn Sie jedoch auf diese klicken, wird die Dropdown-Liste angezeigt. Ich kann nicht finden, welcher Code die Drop-Down-Pfeile entfernt. 

Das ist alles, was ich im CSS sehe:

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0; 
border-radius:0; 
}
htmlcsswordpressdrop-down-menu
9
JA4677

Hier ist eine grundlegende Auswahl

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

Mal sehen, wo dein Problem ist:

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

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

Wenn Sie also none auf appearance setzen, entfernen Sie den Pfeil (standardmäßig menulist), und wenn Sie 0 auf border-radius setzen, entfernen Sie border standardmäßig von select.

NOTEWenn Sie den Pfeil in IE mit dieser Regel select::-ms-expand { display: none; } ausgeblendet haben, um den Pfeil zurück zu haben, müssen Sie ihn setzen display:block

13
dippas

Sie haben die Eigenschaft -webkit-appearance für select überschrieben, die von Browsern als Standardwert -webkit-appearance: menulist; festgelegt wurde. 

8
dsaket

Sie können die select in eine div umschließen und auf dieser div können Sie ::after-Element und -Stil angeben: 

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;
}
1
Shubham Yadav

Die Antwort ist für die meisten richtig, hat aber für mich nicht funktioniert. Das hat den Trick gemacht

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

Ich habe die obigen Lösungen ausprobiert, aber es funktionierte nicht für die Benutzeroberfläche, die mit jquery.min.css erstellt wurde. Ich habe unter css versucht und mein Problem gelöst. Hier bin ich auf .ui-icon-carat-d gerichtet, der dort den Dropdown-Pfeil und das Dropdown-Symbol für die Einstellung zeigt:

.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;
}
0
GSB