Jak nadać styl przyciskowi wprowadzania i wysyłania za pomocą CSS?

Uczę się CSS. Jak stylizować przycisk wprowadzania i wysyłania za pomocą CSS?

Próbuję stworzyć coś takiego, ale nie mam pojęcia jak to zrobić.

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

Programowanie
html css
11. czerwca 2013 в 10:44
32 opinie

Po prostu nadaj styl swojemu przyciskowi Submit tak jak każdemu innemu elementowi html. Możesz targetować różne typy elementów wejściowych używając CSS attribute selector.

Jako przykład możesz napisać

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

Połącz z innymi selektorami

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

Oto działający [Przykład][1]

Monkey D Luffy
Edytowana odpowiedź 7. sierpnia 2018 в 6:05
Komentarze (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; 
}
Komentarze (0)

UI elementów formularzy jest w pewnym stopniu kontrolowane przez przeglądarkę i system operacyjny, więc nie jest trywialne, aby stylizować je w sposób, który wyglądałby tak samo we wszystkich popularnych kombinacjach przeglądarek/OS.

Zamiast tego, jeśli chcesz czegoś konkretnego, polecam użycie biblioteki, która zapewnia stylizowalne elementy formularzy. Jedną z takich bibliotek jest uniform.js.

eis
Edytowana odpowiedź 17. września 2017 в 7:42
Komentarze (2)