Hvordan kan man style input og submit-knappen med CSS?

Jeg er ved at lære CSS. Hvordan kan man style input og submit-knappen med CSS?

I'm forsøger at oprette noget som dette, men jeg har ingen idé om, hvordan man gør

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

Programmering
html css
2013ør juni 2013 в 10:44
27 visninger

Du skal blot style din Submit-knap, som du ville style ethvert andet html-element.Du kan målrette forskellige typer inputelementer ved hjælp af CSS-attributvælgeren.

Som eksempel kan du skrive

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

Kombinere med andre selektorer

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

Her er et fungerende [Eksempel][1]

Monkey D Luffy
Redigeret svar 2018ør august 2018 в 6:05
Kommentarer (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; 
}
Kommentarer (0)

formularelementernes brugergrænseflade er i nogen grad styret af browser og operativsystem, så det er ikke trivielt at style dem meget pålideligt på en måde, så de ser ens ud i alle almindelige browser/OS-kombinationer.

Hvis du i stedet vil have noget specifikt, vil jeg anbefale at bruge et bibliotek, der giver dig stilbare formularelementer. uniform.js er et sådant bibliotek.

eis
Redigeret svar 2017ør september 2017 в 7:42
Kommentarer (2)