La flecha desplegable en los cuadros de selección no se muestra

Estoy usando un tema de wordpress y por alguna razón, el HTML select las cajas no tienen el área desplegable. Se ven como simples input cuadros de texto, aunque al hacer clic en ellos, puede ver la lista desplegable. No puedo encontrar qué código podría estar eliminando las flechas desplegables.

Esto es todo lo que veo en el CSS:

input:focus {
outline: none;
}

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

Aquí hay una selección básica

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

Ahora veamos dónde está tu problema:

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>

Así que cuando estableces none a appearance está quitando la flecha, y cuando está configurando 0 a border-radiusestás eliminando el border por defecto de la select.

Puede restaurar la flecha configurando el appearence a menulist (el valor predeterminado), listbox o auto

NOTA Si ha ocultado la flecha en IE con esta regla select::-ms-expand { display: none; } para tener la flecha hacia atrás necesitarías configurarla display:block

Has anulado el -webkit-appearance propiedad para selectque se fijó como -webkit-appearance: menulist; como valor predeterminado por los navegadores.

Sé que estoy respondiendo esto tarde, pero funcionó para mí y también puede ser útil para alguien. Solo pasa este CSS.

select{
-webkit-appearance: listbox !important
}

La respuesta es correcta para la mayoría, pero no funcionó para mí. Esto hizo el truco

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

Puedes envolver el select en un div y sobre eso div puedes dar ::after elemento y estilo:

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

Probé las soluciones anteriores, pero no funcionaba para la interfaz de usuario, que se creó usando jquery.min.css. He intentado debajo de css y resolvió mi problema. Aquí estoy apuntando .ui-icon-carat-dque muestra la flecha desplegable y la configuración del icono desplegable allí:

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

Yo también estaba teniendo el mismo problema, obtuve la flecha desplegable después de agregar el siguiente archivo jquery jquery-3.4.1.js

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