Ładne pola formularzy
February 11th, 2007
W poniższym tekście przedstawię Wam łatwy sposób na zrobienie ładnie wyglądających i czytelnych pól formularzy. Pola te będą delikatnie zmieniały swój wygląd w zależności od tego czy są aktywne czy nie. Do tego celu posłuży nam pseudoklasa :focus (niestety Internet Explorer nie reaguje na :focus w elementach input).
Na początek stwórzmy prosty szkielet formularza, wyglądający mniej więcej tak:
Ważne jest, żeby nadać każdemu elementowi input klasę .txt (dla textarea nie). Otrzymujemy taki prosty formularz.
Czas teraz na następny, najważniejszy krok. Tworzymy styl CSS, w którym nadajemy naszym polom padding, border, kolor czcionki, i co bardzo ważne – odpowiedni obrazek tła (pobierz moje obrazki). Ja zrobiłem to tak:
textarea, .txt {
padding: 3px 5px;
background: url(i/input_bg.gif) #fff no-repeat left top;
border: #ccc 1px solid;
color: #777;
}
Teraz czas na zdefiniowanie stylów odpowiedzialnych za zachowanie podczas najechania myszką (:hover) i gdy pole jest aktywne (:focus).
textarea:hover, .txt:hover {
color: #555;
}
textarea:focus, .txt:focus {
background: url(i/input_focus_bg.gif) #fff no-repeat left top;
border: #aaa 1px solid;
color: #222;
}
I to już wszystko! Możemy się teraz cieszyć ładnym formularzem :-).
Oczywiście kolory i tło możemy dowolnie zmieniać uzyskując jeszcze ciekawsze efekty. To jest jednak podstawa, sam używam podobnego rozwiązania na killbox’ie.
Na koniec podam Wam jeszcze link do artykułu Riddle’a, w którym opisuje on jak budować formularze z wykorzystaniem standardów. W połączeniu z techniką przedstawioną przez mnie powyżej powstanie na pewno bardzo elegancki formularz :-).
Marcin Grudzień, dumny mieszkaniec Warszawy, lat 21. Jest bardzo leniwy a jednoczśnie ciągle czymś zajęty. Z braku ciekawszych zajęć stworzył tego bloga. Przeczytaj 
# Odpowiedz Cytuj
Dobrym nawykiem jest również nadawanie odpowiednich class przyciskom.
I wydaje mi się, że jednak lepiej jest “upakować” sam input i jego etykietkę do div`a- zamist do p – imho bardziej semantycznie.
PS. Strasznie się kod rozjeżdża, przynajmnie pod Operą ;)
# Odpowiedz Cytuj
Pewnie masz rację co do tych div’ów, dlatego dałem na końcu link to odpowiedniego artykułu :-). Mi chodziło o pokazanie sposobu na ostylowanie input’a… A co do przycisków to o tym też może niedługo napiszę.
# Odpowiedz Cytuj
w IE ogólnie pseudoklasy działają wyłącznie dla
Widziałem gdzieś *.htc, który pozwalał na działanie pseudoklasy :hover w każdym innym elemencie. Może po odpowiedniej modyfikacji dało by się zmusić IE do wyświetlania ? ;-) Sprobuję jak wrócę do domu.
# Odpowiedz Cytuj
hym. popsułem przez używanie tagów xHTML ;) chodziło o linki, czyli
# Odpowiedz Cytuj
Kamil: csshover.htc
# Odpowiedz Cytuj
Kamil: Nie wiem, czemu Twoje linki się nie wyświetlają. Jak możesz to wyślij mi je na maila.
Znalazłem coś na ten temat u Riddle’a:
http://riddle.jogger.pl/2006/07/15/problemy-z-.htc/
http://riddle.pl/-/htc/csshover.htc
Jak będę miał trochę czasu to bardziej się w to zagłębię i coś napiszę…