para - CSS: después del contenido debajo de un elemento seleccionado, hace clic no funciona



efectos hover para imagenes css (1)

Tengo este CSS (simplificado) para el elemento seleccionado para eliminar la apariencia específica del navegador

.select{
    display:inline-block;
    position:relative;
}
.select:after{
    position:absolute;
    bottom:0;right:0;
    content:'\2193'; 
}
select{
    appearance:none; (-moz and -webkit too)
    width:100%;
    height:100%;
}

(Mejor visto en http://jsfiddle.net/kwpke3xh/ )

body{
    background:#eef;
    font-family:sans-serif;
}
.select{
    display:inline-block;
    background-color:#fff;
    border-radius:.5em;
    border:.1rem solid #000;
    color:#013;
    width:8em;
    height:1.5em;
    vertical-align:middle;
    position:relative;
}
.select:after{
	position:absolute;
	bottom:.15em;top:.15em;right:.5rem;
	content:'\2193'; 
}
select{
    -webkit-appearance:none;
   -moz-appearance:none;
   	appearance:none;
    font:inherit;
    border:none;
    background-color:transparent;
    color:inherit;
    width:100%;
    height:100%;
    padding:0 .5em;
}
<span class="select">
    <select>
        <option>A</option>
        <option>B</option>
    </select>
</span>

Se ve bien, aparte de Firefox sigue mostrando la flecha (como se describe Firefox 30.0 - -moz-apariencia: ninguno no funciona )

El único problema técnico es que cuando hago clic en el elemento de selección, se muestran los elementos de la opción, pero si hago clic directamente en la flecha, no aparece.

Hay alguna manera de evitar esto?

https://src-bin.com






pseudo-element