Cómo eliminar el borde de la lista desplegable: CSS

Quiero eliminar el borde que viene justo fuera de la lista desplegable.
Estoy intentando:

select#xyz option { Border: none; } 

Pero no funciona para mí.

Lo máximo que puedes obtener es:

 select#xyz { border:0px; outline:0px; } 

No puedes darle un estilo completo, pero puedes probar algo como

 select#xyz { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(../images/select-arrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-position: center right; background-repeat: no-repeat; border: 1px solid #AAA; color: #555; font-size: inherit; margin: 0; overflow: hidden; padding-top: 2px; padding-bottom: 2px; text-overflow: ellipsis; white-space: nowrap; } 

No puede aplicar estilos al cuadro desplegable, solo al campo de entrada. La caja es renderizada por el sistema operativo.

enter image description here

Si desea más control sobre el aspecto de sus campos de entrada, siempre puede buscar soluciones de JavaScript .

Sin embargo, si su intención era eliminar el borde de la entrada en sí, su selector está equivocado. Pruebe esto en su lugar:

 select#xyz { border: none; } 
 select#xyz { border:0px; outline:0px; } 

Solución exacta