Kuinka tyylitellä syöttö- ja lähetyspainiketta CSS:llä?

Opettelen CSS:ää. Kuinka tyylitellä syöttö- ja lähetyspainiketta CSS:llä?

Yritän luoda jotain tällaista, mutta minulla ei ole aavistustakaan siitä, miten se tehdään.

<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>

1

Ohjelmointi
html css
T11 kesäkuu 2013 в 10:44
17 näkymät

Yksinkertaisesti tyylittele Lähetä-painike kuten tyylittelisit minkä tahansa muun html-elementin.Voit kohdistaa eri tyyppisiä syöttöelementtejä käyttämällä CSS-attribuutinvalitsinta.

Esimerkkinä voit kirjoittaa

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

Yhdistetään muiden valitsijoiden kanssa

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

Tässä on toimiva [Esimerkki][1]

Monkey D Luffy
Muokattu vastausta T11 elokuu 2018 в 6:05
Kommentit (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; 
}
Kommentit (0)

Lomake-elementtien käyttöliittymä on jossain määrin selain- ja käyttöjärjestelmäkohtainen, joten ei ole yksinkertaista tyylitellä niitä luotettavasti siten, että ne näyttäisivät samalta kaikissa yleisimmissä selain/käyttöjärjestelmäyhdistelmissä.

Sen sijaan, jos haluat jotain erityistä, suosittelen käyttämään kirjastoa, joka tarjoaa muotoiltavia lomake-elementtejä. uniform.js on yksi tällainen kirjasto.

eis
Muokattu vastausta T66 syyskuu 2017 в 7:42
Kommentit (2)