Come in immettere il pulsante di input e inviare con CSS
CSS è una lingua per creare fogli di stile che descrivono come un documento è presentato in un linguaggio di markup, come HTML o XML. Insieme a HTML e JavaScript, CSS è un componente chiave del World Wide Web. Usando CSS, gli utenti possono modellare tutti gli elementi HTML, tra cui tabelle, pulsanti, campi di input, moduli e molti altri.
Questo post spiegherà:
- Come modellare i campi di input con CSS?
- Come inviare il pulsante di invio con CSS?
Come modellare i campi di input con CSS?
Per modellare il campo di input con CSS, prova la procedura menzionata.
Passaggio 1: creare il modulo di input
Prima di tutto, crea una forma in HTML. Per fare ciò, segui le istruzioni elencate di seguito:
- Innanzitutto, crea una forma con l'aiuto di ""Tag.
- All'interno della forma, il ""L'elemento è definito per specificare le didascalie per"ingresso" elementi. L'etichetta "per"L'attributo viene utilizzato per collegare l'elemento dell'etichetta con l'elemento attraverso"id".
- IL "tipo"L'attributo determina il tipo di input, come testo o numero.
- IL "classe"Attributo è assegnato il"Ingresso" nome, "segnaposto"Attributo assegna il testo del segnaposto nel campo di input:
Produzione
Passaggio 2: pulsante di input di stile in CSS
Per modellare il pulsante di input in CSS, controlla le proprietà fornite:
ingresso
imbottitura: 8px;
raggio di confine: 10px;
Margine: 5px Auto;
bordo: 1px solido #918383;
Background-color: #87b8b8;
Box-Shadow: 1px 2px 1px 2px RGB (230, 229, 229);
Colore: #C9C2C2;
contorno: nessuno;
Font-size: 18px;
Accedi al "ingresso"Classe e quindi applicare proprietà al di sotto delle menzioni:
- Impostato "imbottitura"Ciò specifica lo spazio attorno al contenuto dell'elemento.
- "raggio di confine"La proprietà imposta i bordi dell'elemento.
- "margine"Proprietà con il valore"5px Auto"Aggiunge spazio"5px"In alto e in basso e"auto"Viene utilizzato per impostare spazio uguale attorno all'elemento a sinistra e a destra.
- "confine"La proprietà specifica il bordo attorno al tavolo.
- "colore di sfondo"La proprietà viene utilizzata per specificare il colore dello sfondo.
- "Box-Shadow"Aggiunge un'ombra attorno all'elemento. È una proprietà stenorta che specifica X-offset, Y-offset, Effect, effetto di diffusione e colore per l'ombra.
- "colore"La proprietà si riferisce al colore del carattere dell'elemento.
- "contorno"Regola la linea attorno agli elementi per renderla dominante.
- "dimensione del font"La proprietà viene utilizzata per impostare la dimensione del carattere dell'elemento.
Produzione
Successivamente, accedi al "etichetta"Elemento per lo styling It:
etichetta
Font-size: 18px;
Colore: RGB (15, 15, 15);
Margine: 20px;
Dopo aver acceduto all'elemento etichetta, applica lo stile di tua scelta. Ad esempio, abbiamo applicato "dimensione del font","colore", E "margine" proprietà.
Produzione
Passiamo verso la sezione successiva per modellare il pulsante di invio usando CSS.
Come inviare il pulsante di invio con CSS?
Per modellare il pulsante di invio con CSS, esamina l'esempio seguente, che dimostra una guida a gradino su come creare e modellare il pulsante HTML.
Passaggio 1: crea il pulsante Invia
Inizialmente, aggiungi il testo dell'intestazione all'interno del tag di intestazione "". Quindi, crea un pulsante utilizzando il “"Elemento e imposta il tipo di pulsante come"invia":
Elemento pulsante di stile
Produzione
Passaggio 2: elemento "pulsante" di stile
Per modellare il pulsante in CSS, controlla le proprietà descritte di seguito:
pulsante
imbottitura: 12px 40px;
raggio di frontiera: 8px;
Box-Shadow: 2px 2px 2px 1px RGB (131, 131, 219);
bordo: 1px grigio solido;
Font-size: 20px;
Accedi all'elemento pulsante per nome del tag e applica le proprietà sul pulsante in base alle tue preferenze. Ad esempio, abbiamo applicato "imbottitura","raggio di confine","Box-Shadow","confine", E "dimensione del font" proprietà.
Produzione
Aggiungiamo l'effetto hover sull'elemento pulsante:
Button: Hover
Background-color: CadetBlue;
Colore: RGB (246, 244, 248);
IL "Pulsante: hover"Il selettore viene utilizzato per applicare l'effetto del mouse sul pulsante. Con l'aiuto del "molare"Selettore, gli utenti possono generare l'effetto CSS in tempo reale. Ad esempio, abbiamo impostato il "colore di sfondo" E "colore"Proprietà come descritto sopra:
Abbiamo discusso per modellare il campo di input e l'invio con CSS.
Conclusione
Per modellare l'elemento di input e il pulsante di invio con CSS, vengono utilizzate diverse proprietà di CSS, tra cui "imbottitura", "radius di confine", "box-shadow", "margine", "bordo", "colore di sfondo", " Font-size ”e molti altri. Gli utenti possono applicare le proprietà specificate accedendo agli elementi tramite il nome del tag. Questo post ha dimostrato il metodo per lo styling dei campi di testo di input e invia i pulsanti con CSS.