Come stilizzare il pulsante di input e di invio con i CSS?

Sto imparando i CSS. Come stilizzare l'input e il pulsante di invio con i CSS?

Sto cercando di creare qualcosa di simile, ma non ho idea di come fare

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

Programmazione
html css
11º giugno 2013 в 10:44
28 visualizzazioni

Semplicemente stilizza il tuo pulsante Submit come faresti con qualsiasi altro elemento html. puoi indirizzare diversi tipi di elementi di input usando CSS attribute selector

Come esempio potreste scrivere

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Combina con altri selettori

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

Ecco un [Esempio][1] funzionante

Monkey D Luffy
Risposta modificata 7º agosto 2018 в 6:05
Commentari (0)

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}
Commentari (0)

L'interfaccia utente degli elementi del modulo è in qualche modo controllata dal browser e dal sistema operativo, quindi non è banale dare loro uno stile molto affidabile in modo che appaiano uguali in tutte le combinazioni comuni di browser/OS.

Invece, se volete qualcosa di specifico, vi raccomanderei di usare una libreria che vi fornisce elementi di forma stilizzabili. uniform.js è una di queste librerie.

eis
Risposta modificata 17º settembre 2017 в 7:42
Commentari (2)