Hvordan style input- og send-knappen med CSS?

Jeg holder på å lære CSS. Hvordan utforme inngangs- og innsendingsknappen med CSS?

Jeg prøver å lage noe som dette, men jeg har ingen anelse om hvordan jeg gjør det

<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
11. juni 2013 в 10:44
5 visninger

Bare utform Send-knappen som du ville utformet et hvilket som helst annet html-element. du kan målrette forskjellige typer inndataelementer ved hjelp av CSS-attributtvelger.

Som et 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 en fungerende [Eksempel][1]

Monkey D Luffy
Redigert svar 7. 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)

skjemaelementer styres til en viss grad av nettleser og operativsystem, så det er ikke trivielt å style dem på en pålitelig måte slik at de ser like ut i alle vanlige nettleser/OS-kombinasjoner.

I stedet, hvis du vil ha noe spesifikt, vil jeg anbefale å bruke et bibliotek som gir deg stilbare skjemaelementer. uniform.js er et slikt bibliotek.

eis
Redigert svar 17. september 2017 в 7:42
Kommentarer (2)