Inputy. Wszędzie z nich korzystamy. W formularzach, szukajkach, na forum itd. Kiedyś pierwsze inputy nasze wyglądaly zapewnie tak:
Jest to taki sam przykład jak w kursie numer 1. Dodatkowym elementem do tamtego kodu jest:
|
1 | <input type="text" name="name" size="15" style="font-weight:bold;color:red;" /> |
Problemem potem stawały się gdy mieliśmy ich kilka w różnych plikach a chcieliśmy zmienić ich wygląd. Trzeba było szukać i zmieniać w każdym pliku osobno. Ale mamy CSS przecież od tego. Zatem jak zrobić inputa w CSS'ie takiego jak w przykładzie wyżej? Oto kod:
|
1 2 3 4 5 |
#input_my{ width: 200px; font-weight:bold; color:red; } |
|
1 | <input type="text" id="input_my" name="name" /> |
Przykład #1:
Taki kod pozwoli nam szybko i bez problemów zmienić wszystkie inputy o danym id. Czas pozbyć sie ramki z inputa.
|
1 2 3 4 5 6 |
#input_my{ width: 200px; font-weight:bold; color:red; border: 0px; } |
Przykład #2:
Teraz problemem jest tylko to, że nie widzimy pola inputa. Dodajmy tło by input stał się widoczny na białym tle.
|
1 2 3 4 5 6 7 |
#input_my{ width: 200px; font-weight:bold; color:white; border: 0px; background: red; } |
Przykład #3:
I już cały input mamy gotowy. Pare linijek kodu i po sprawie. Potrafimy już szybko i w prosty sposób zmienić nasz input. Jeżeli ktoś chciałby coś innego w tle zamiast czerwonego to wystarczy w background dać ścieżke do obrazka.
Autor: Łukasz Lewak (LiON_87)
Pokaż jak Ty rozwiązałbyś ten problem lub inny dowolny przez Ciebie wybrany. Przygotowany kurs wraz z imieniem i nazwiskiem wyślij na adres admin.myme[at]gmail.com. Jeżeli uznamy kurs za ciekawy ukaże się on na naszej stronie.
Dodaj komentarz