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

mostrar texto hover css

Question

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?

Answer 1

La solución CSS más simple sería agregar pointer-events: none al pseudo elemento. Al hacerlo, puede hacer clic en el elemento porque los eventos del mouse se eliminan.

Ejemplo actualizado

.select:after {
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:''/2193'';
    pointer-events: none;
}

^{(Solo tenga en cuenta el soporte del navegador para la propiedad ).}