Botón selector de archivos de estilo usando CSS

Botón selector de archivos de estilo usando CSS — Amit Merchant — Un blog sobre PHP, JavaScript, etc.

 

El botón de selección de archivos predeterminado que obtiene al usar el file El elemento de entrada no es muy atractivo y es bastante soso.

Hoy aprendí que hay una pequeña pseudoclase útil llamada :file-selector-button que puede usar para diseñar el botón de selección de archivo usando CSS.

Así es como puedes usarlo.

<label for="profile-picture">Choose a profile picture:</label><br>

<input type="file" name="profile-picture" class="profile-picture" />

Podemos diseñar el botón de selección de archivo usando el siguiente CSS.

.profile-picture::file-selector-button {
    background-color: #4d4d4d;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

Incluso puedes usar el :hover pseudo-clase para diseñar el botón de selección de archivos cuando el usuario se desplaza sobre él.

.profile-picture::file-selector-button:hover {
    opacity: 0.8;
}

Bastante genial, ¿verdad?

Si quieres conocer otros artículos parecidos a Botón selector de archivos de estilo usando CSS puedes visitar la categoría Código.

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