Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
miércoles, 23 de enero de 2013
Internet Explorer 10Va 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:

Botón de limpiar campo de IE10
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 ;-)

image


Publicado en: Variable not found.

6 Comentarios:

Anónimo dijo...

¿Hay alguna manera de que esto funcione en asp?
Gracias

josé M. Aguilar dijo...

Hola!

Esto es sólo CSS, por lo que funciona con cualquier tipo de tecnología de servidor (asp, php, asp.net o lo que sea).

Un saludo!

Anónimo dijo...

Eso pensaba yo, pero pongo el código en mi hoja de estilos y no me quita el botón de limpiado. Nunca he usado los pseudo-elements en mis estilos, no sé si hay que poner algo para que los entienda.
¡Muchas gracias por contestar!

josé M. Aguilar dijo...

Hola,

pues no, en principio debería funcionar directamente sobre IE. Comprueba si estás usando selectores que apunten correctamente a los input en los que quieres quitar el botón, debe ser por algo así.

Suerte!

Anónimo dijo...

Parece que el motivo es que está activada la vista de compatibilidad y entonces no coge los pseudo-elements, para que funcione hay que desactivar la vista de compatibilidad pero entonces me dejan de funcionar otras partes de la aplicación.
Muchas gracias de todas formas.

josé M. Aguilar dijo...

Pues tiene bastante sentido :)

Muchas gracias por la aportación!