Strzałka w dół w wybranych polach nie wyświetlających się

Question

Używam motywu wordpress i z jakiegoś powodu pola HTML select nie mają rozwijanego obszaru. Wyglądają jak zwykłe pola tekstowe input, chociaż po ich kliknięciu widać listę rozwijaną. Nie mogę znaleźć kodu, który mógłby rozebrać spadające strzałki.

To wszystko widzę w CSS:

input:focus { 
outline: none; 
} 

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

Answer 1

Masz nadpisane właściwość -webkit-appearance dla select, który został ustawiony jako -webkit-appearance: menulist; jako wartości domyślnej przez przeglądarki.

Answer 2

Oto podstawowe wybrać

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

Teraz pozwala zobaczyć gdzie jest twój problem:

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>

Więc po ustawieniu none do appearance usuwasz strzałkę (domyślnie jest to menulist), a po ustawieniu wartości 0 na border-radius domyślnie usuwasz border z .

Answer 3

Odpowiedź jest poprawna dla większości, ale nie dla mnie. To załatwiło sprawę

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

Answer 4

Próbowałem powyżej rozwiązań, ale to nie działa na interfejsie, który został stworzony przy użyciu jquery.min.css. Próbowałem poniżej CSS i rozwiązać mój issue.Here jestem kierowania ui-icon-karatowego-d który pokazany rozwijaną strzałkę rozwijaną ikonę i ustawienie tam

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