Hogyan lehet CSS-szel stilizálni a beviteli és elküldési gombot?

CSS-t tanulok. Hogyan lehet a beviteli és elküldési gombot CSS-szel stílusosítani?

I'm próbál létrehozni valami ilyesmit, de fogalmam sincs, hogyan kell csinálni.

<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

Programozás
html css
11. június 2013 в 10:44
29 nézetek

Egyszerűen stilizálja a Submit gombot, mint bármely más html elemet.A CSS attribútumválasztó segítségével különböző típusú beviteli elemeket is megcélozhat.

Példaként írhatod, hogy

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

Kombinálni más szelektorokkal

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

Itt egy működő [Példa][1]

Monkey D Luffy
Szerkesztett válasz 7. augusztus 2018 в 6:05
Kommentárok (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; 
}
Kommentárok (0)

az űrlapelemek felhasználói felületét némileg a böngésző és az operációs rendszer szabályozza, ezért nem triviális ezeket megbízhatóan úgy alakítani, hogy minden gyakori böngésző/OS kombinációban ugyanúgy nézzenek ki.

Ehelyett, ha valami különlegeset akarsz, azt javasolnám, hogy használj egy olyan könyvtárat, amely stilizálható űrlapelemeket biztosít. Az uniform.js egy ilyen könyvtár.

eis
Szerkesztett válasz 17. szeptember 2017 в 7:42
Kommentárok (2)