miércoles, 23 de enero de 2013
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
Pero seguro que te estás preguntando, ¿y en vez de eliminarla puedo personalizarla? Pues un poco también ;-) Observad el siguiente código:
Publicado en: Variable not found.
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.
6 Comentarios:
¿Hay alguna manera de que esto funcione en asp?
Gracias
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!
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!
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!
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.
Pues tiene bastante sentido :)
Muchas gracias por la aportación!
Enviar un nuevo comentario