Estilizar un botón de entrada tipo = archivo - html

En HTML, cada elemento se muestra como un elemento particular en la página web, como un botón, párrafo, línea horizontal y muchos más. Sin embargo, también podemos aplicar estilos personalizados a estos elementos utilizando CSS. La mayoría de los navegadores no alteran la apariencia de los elementos de entrada usando JavaScript o CSS. Aunque el estilo directo de un elemento de entrada es difícil, el "El elemento nos ayuda a diseñar las entradas.

Los resultados de aprendizaje de este blog son:

• Cómo agregar un elemento de tipo de archivo de entrada en HTML?
• Cómo diseñar un botón de entrada tipo = "archivo"?

Cómo agregar un elemento de tipo de archivo de entrada en HTML?

El elemento HTML con el "tipo" atributo "archivo"Se utiliza para hacer un elemento de entrada que acepte archivos.

Comprobemos que esté funcionando primero.

En HTML, agregue un ""Elemento y asociar el"tipo"Atributo como"archivo"A eso:

Producción

Cómo diseñar un botón de entrada tipo = "archivo"?

El elemento con "tipo = archivo"Viene con el estilo predeterminado. En el ejemplo a continuación, el HTML "El elemento "se utiliza para diseñar un botón de entrada" tipo = archivo ".

En HTML, siga los pasos a continuación para crear una página HTML:

• Agrega un ""Elemento junto con el"para"Atributo y asignarlo una clase"estilo de archivo". El "para"El atributo se utiliza para acceder a la etiqueta"identificación" atributo.
• Dentro del elemento de la etiqueta, agregue el ""Etiqueta para incrustar la imagen y el"

  "Etiqueta para el párrafo.

• El elemento "" se agrega con los atributos "src" y "ancho".
• El "SRC"El atributo contiene la URL de la imagen.
• El "ancho"El atributo determina el ancho de la imagen:

Subir foto

Producción

En la siguiente sección, las propiedades de CSS que vamos a utilizar serán discutidas.

ID de estilo "archivo"

#archivo
Pantalla: ninguno;

Para ocultar el elemento de archivo de entrada ordinario, el "mostrar"La propiedad se establece como"ninguno".

Producción

Clase de etiqueta de estilo "estilo archivo"
Para acceder al elemento de la etiqueta, utilice el ".estilo de archivoClase "y aplique el código proporcionado a continuación:

.estilo de archivo
Font-Family: 'Trebuchet MS';
Ancho: 400px;
bloqueo de pantalla;
Color de fondo: #F5F4F4;
margen: auto;
cursor: puntero;
Text-Align: Center;
relleno: 20px;
Border-Radius: 15px;
Border: 2px Dable #CDC8C8;

En el código mencionado anteriormente, el ""Se diseña a través de las siguientes propiedades de CSS:

• "Familia tipográfica"Establece el estilo de fuente.
• "ancho"Determina el ancho del elemento" ".
• "mostrar"La propiedad ajusta el diseño del elemento" ". El valor "bloquear"Tomará el ancho completo.
• "color de fondo"Aplica el color al fondo del elemento" ".
• "margen"La propiedad ajusta el espacio alrededor del elemento.
• "cursor"Define el estilo del cursor del mouse como un"puntero"Al señalar el elemento.
• "texto alineado"Identifica la alineación del texto del elemento.
• "relleno"Determina el espacio alrededor del contenido del elemento.
• "radio fronterizo"Hace que los bordes del elemento reduzcan.
• "borde"Ajusta el borde del elemento definiendo los valores para el ancho, el estilo y el color del borde.

La imagen a continuación muestra la salida del código mencionado anteriormente:

Clase de estilo "estilo de archivo" en Hover

.Estilo de archivo: Hover
Color de fondo: RGB (228, 213, 213);

El ":flotar"Es una pseudo-clase que se utiliza para aplicar el efecto de desplazamiento sobre el elemento. En nuestro escenario, cuando el cursor del mouse apunta al elemento, el color de fondo del elemento se cambiará.

Producción

Te hemos enseñado cómo diseñar un tipo de entrada = "archivoBotón en HTML.

Conclusión

El html ""El elemento se utiliza para diseñar el elemento de entrada con el"tipo = archivo" botón. La etiqueta de la etiqueta define el "para"Atributo que se utiliza para acceder al"identificación"Atributo de la etiqueta de entrada. Después de eso, las propiedades CSS como el borde, el color de fondo, el cursor, el relleno y muchos más se pueden utilizar para diseñar el botón de entrada "Tipo = archivo". Este blog guió relacionado con el estilo de un tipo de entrada = "archivo" botón.