CSS::botón-selector-de-archivo

CSS::botón-selector-de-archivo

A todos nos gustan los estilos bonitos. form controles pero, debido a las diferencias en las vistas del sistema operativo, su estilo puede ser engorroso. Debido a este problema, hemos creado docenas de bibliotecas para simular estos controles. Desafortunadamente, esto a veces tiene un costo de accesibilidad, rendimiento, etc.

Un control que tradicionalmente ha sido difícil de diseñar es el input[type=file] elemento. Ha dicho input la variación contiene visualmente un botón y texto, en los que se puede hacer clic. Un poco de un monstruo de Frankenstein si me preguntas. Sin embargo, ¿podemos diseñar la parte del botón? ¡Podemos!

Para aplicar estilo a la parte del botón del botón input[type=file]puedes usar ::file-selector-button:

input[type=file]::file-selector-button {
  border: 1px solid green;
  background: lightgreen;
}

estilizar esto input La variante no era posible cuando se introdujo por primera vez. ¡WebKit primero hizo posible diseñar controles de formularios complejos, y no podemos agradecerles lo suficiente!

La publicación CSS::file-selector-button apareció por primera vez en el blog de David Walsh.

Si quieres conocer otros artículos parecidos a CSS::botón-selector-de-archivo puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas