Styling un pulsante di input = file - html

In HTML, ogni elemento viene visualizzato come un particolare elemento nella pagina Web, come un pulsante, paragrafo, linea orizzontale e molti altri. Tuttavia, possiamo anche applicare stili personalizzati a questi elementi usando CSS. La maggior parte dei browser non altera l'aspetto degli elementi di input usando JavaScript o CSS. Sebbene lo stile diretto di un elemento di input sia difficile, il ""L'elemento ci aiuta a modellare gli input.

I risultati di apprendimento di questo blog sono:

• Come aggiungere un elemento tipo di file di input in HTML?
• Come modellare un pulsante di input type = "file"?

Come aggiungere un elemento tipo di file di input in HTML?

L'elemento html con "tipo"Attributo"file"Viene utilizzato per creare un elemento di input che accetta i file.

Controlliamo prima che funzioni.

In HTML, aggiungi un ""Elemento e associare il"tipo"Attributo come"file"A esso:

Produzione

Come modellare un pulsante di input type = "file"?

L'elemento con "type = file"Viene fornito con lo stile predefinito. Nell'esempio seguente, l'HTML ""L'elemento viene utilizzato per modellare un pulsante input" type = file ".

In HTML, seguire i passaggi seguenti per creare una pagina HTML:

• Aggiungere un ""Elemento insieme al"per"Attributo e assegnarlo una classe"stile file". IL "per"L'attributo viene utilizzato per accedere al tag"id"Attributo.
• All'interno dell'elemento etichetta, aggiungi il ""Tag per incorporare l'immagine e il"

  "Tag per il paragrafo.

• L'elemento "" viene aggiunto con gli attributi "SRC" e "larghezza".
• IL "src"L'attributo contiene l'URL dell'immagine.
• IL "larghezza"L'attributo determina la larghezza dell'immagine:

Carica una foto

Produzione

Nella prossima sezione, le proprietà CSS che utilizzeremo saranno discusse.

ID "file" di stile

#file
visualizzazione: nessuno;

Per nascondere l'elemento del file di input ordinario, il "SchermoLa proprietà "è impostata come"nessuno".

Produzione

Stile Classe di etichetta "in stile file"
Per accedere all'elemento dell'etichetta, utilizzare il “.stile file"Classe e applicare il codice sotto fornito:

.stile file
Font-Family: 'Trebuchet MS';
larghezza: 400px;
blocco di visualizzazione;
Background-color: #f5f4f4;
Margine: auto;
Cursore: puntatore;
Testo-align: centro;
imbottitura: 20px;
raggio di confine: 15px;
Bordo: 2px Dashed #Cdc8c8;

Nel codice sopra menzionato, il ""Viene disegnato attraverso le seguenti proprietà CSS:

• "famiglia di font"Imposta lo stile del carattere.
• "larghezza"Determina la larghezza dell'elemento" ".
• "SchermoLa proprietà "regola il layout" "dell'elemento". Il valore "bloccare"Prenderà tutta la larghezza.
• "colore di sfondo"Applica il colore allo sfondo" "dell'elemento".
• "margine"La proprietà regola lo spazio attorno all'elemento.
• "cursore"Definisce lo stile del cursore del mouse come"Pointer"Quando si indica l'elemento.
• "allineamento"Identifica l'allineamento del testo dell'elemento.
• "imbottitura"Determina lo spazio attorno al contenuto dell'elemento.
• "raggio di confine"Rende i bordi dell'elemento.
• "confine"Regola il bordo dell'elemento definendo i valori per la larghezza, lo stile e il colore del bordo.

L'immagine seguente visualizza l'output del codice sopra indicato:

Stile Classe "in stile file" su Hover

.stile file: hover
Background-color: RGB (228, 213, 213);

IL ": Hover"È una classe pseudo che viene utilizzata per applicare l'effetto hover sull'elemento. Nel nostro scenario, quando il cursore del mouse indica l'elemento, il colore di sfondo dell'elemento verrà modificato.

Produzione

Ti abbiamo insegnato come modellare un tipo di input = "file"Pulsante in HTML.

Conclusione

L'HTML “"L'elemento viene utilizzato per modellare l'elemento di input con"type = file"Pulsante. Il tag dell'etichetta definisce il "per"Attributo che viene utilizzato per accedere al"id"Attributo del tag di input. Successivamente, le proprietà CSS come bordo, colore di sfondo, cursore, imbottitura e molti altri possono essere utilizzati per modellare il pulsante input "type = file". Questo blog guidato in relazione allo styling di un tipo di input = "file"Pulsante.