Va un truquillo rápido. Los que ya habéis saltado a Internet Explorer 10 seguro habréis notado el pequeño botón que este navegador añade a los cuadros de edición estándar cuando obtienen el foco, y que permite limpiar rápidamente su contenido:


Pues bien, hay veces que a nivel de diseño no nos interesa que se muestre la pequeña “X” en los controles, su posición entra en conflicto con otro elemento visual, o simplemente no queremos aportar esta funcionalidad,  por lo que es posible desactivar esta característica de los <input> usando CSS:

input::-ms-clear{
    display: none;
}

Tan sencillo como eso.

Pero seguro que te estás preguntando, ¿y en vez de eliminarla puedo personalizarla? Pues un poco también ;-) Observad el siguiente código:

input::-ms-clear{
    background-color: red;
    color: white;
    border: 1px solid #808080;
}

En tiempo de ejecución, esa discreta e insípida “X” se habría convertido en algo bastante más contundente ;-)




Publicado en: Variable not found.