Lo que quieres lograr no es posible hacerlo con css, sin embargo aquí te propongo una solución alternativa que te deja aplicar el estilo que quieras a tus opciones sin usar <select>
ni <option>
, solamente usando un <div>
para el select, y varias <ul>
para los options.
div {
margin: 2em;
padding: .5em;
border: 2px solid #6bb99c;
width: 12em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 2px;
}
div > ul { display: none; list-style: none;}
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid
#6bb99c;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #6bb99c;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
Select
<ul>
<li><a href="#">Primera opción</a></li>
<li><a href="#">Segunda opción</a></li>
<li><a href="#">Tercera opción</a></li>
</ul>
</div>
Y si lo que quieres es que te aparezca todo sin borde como aclaraste anteriormente en un comentario, simplemente quitas la propiedad border del ejemplo que te puse quedándote así:
div {
margin: 2em;
padding: .5em;
width: 12em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
div > ul { display: none; list-style: none;}
div:hover > ul {display: block; border-top: 1px solid
white;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid white;}
div:hover > ul > li:hover { background: white;}
<div>
Select
<ul>
<li><a href="#">Primera opción</a></li>
<li><a href="#">Segunda opción</a></li>
<li><a href="#">Tercera opción</a></li>
</ul>
</div>
Luego haces lo que sigue con JQuery o con Javascript para captar el elemento seleccionado y listo.
Espero que te ayude.