estoy usando pantalla: ninguno; en la hoja de estilo para ocultar una serie de campos de formulario. Cuando el usuario hace clic en los campos visibles de Nombre o Apellido, el resto de los campos se muestran usando JavaScript getElementById para mostrar el bloque.
Todo funciona, excepto que la flecha hacia abajo aún se muestra desde el elemento seleccionado cuando debería estar oculto con todo lo demás. Probé CSS:
select { appearance: none; }Pero eso no funcionó. Imagen debajo del problema y enlace aquí a la página de prueba: Página de prueba de formulario
Hay un :before pseudo-elemento dentro del div principal seleccionado. Esta es la flecha y no la selección. 
Debería poder simplemente establecer
.elementor-select-wrapper::before { display: none }
Tienes tres opciones principales:
i) display: none; ii) visibility: hidden; iii) hiddenEjemplo de trabajo:
select.b { display: none; } select.c { visibility: hidden; } <select class="a"> <option>Option A1</option> <option>Option A2</option> <option>Option A3</option> <option>Option A4</option> <option>Option A5</option> </select> <select class="b"> <option>Option B1</option> <option>Option B2</option> <option>Option B3</option> <option>Option B4</option> <option>Option B5</option> </select> <select class="c"> <option>Option C1</option> <option>Option C2</option> <option>Option C3</option> <option>Option C4</option> <option>Option C5</option> </select> <select class="d" hidden> <option>Option D1</option> <option>Option D2</option> <option>Option D3</option> <option>Option D4</option> <option>Option D5</option> </select>Otras lecturas: