Stylowanie input
W tym materiale przedstawię jak stylować formularze. Poświęcę na to trochę czasu, ponieważ wiedza którą zdobędziesz otworzy przed Tobą dodatkowe możliwości – wszystko dzięki pseudoklasom dostępnym dla pól formularzy.
Poniżej na filmie i kodzie zobaczysz jak ostylować podstawowe elementy z wykorzystaniem sposobów które już znamy:
wonderful-khayyam-eekqi
wonderful-khayyam-eekqi danielminschinski
Pseudoklasy :optional oraz :required
Pseudoklasy :required
oraz optional
są powiązane z atrybutem HTML, który prezentowałem wcześniej w poprzednich materiałach – required
.
Pewnie pamiętasz, że ten atrybut zmusza użytkownika do uzupełnienia wskazanego pola. Inaczej, wysłanie formularza jest niemożliwe. Pseudoklasa :required
oznacza po prostu elementy, które posiadają ten atrybut. W przeciwieństwie do :required
, :optional
odwołuje się tylko do elementów input
których wypełnienie jest nie konieczne.
Spójrz na poniższy przykład z zastosowaniem pseudoklas:
nice-sinoussi-np5v0
nice-sinoussi-np5v0 danielminschinski
Pseudoklasy :focus oraz :placeholder
Następną grupę przydatnych podczas stylowania formularzy pseudoklas są :placeholder-shown
oraz :focus
. Dodatkowo, warto wspomnieć o pseudoelemencie ::placeholder
.
::placeholder
ma za zadanie skupiania się na samym placeholderze, tzn. atrybucie wskazówki dla input
, o którym omawiałem w poprzednim materiale. Umożliwia nam to chociażby zmianę czcionki lub koloru.
:placeholder-shown
to pseudoklasa, która skupia się na każdym elemencie, który w danym momencie wyświetla placeholder. Kiedy placeholder znika wraz z wpisywaniem danych przez użytkownika, style wpisane w tej pseudoklasie również przestają działać.
Pseudoklasa :focus
skupia się na elemencie, na którym ostatnio kliknęliśmy i pozwala nam go stylować.
Spójrz na poniższy przykład z zastosowaniem pseudoklas :focus
i :placeholder
:
sweet-fast-pmhcs
sweet-fast-pmhcs danielminschinski
Pseudoklasa :valid
Załóżmy sobie taki przypadek. Chcielibyśmy, żeby użytkownik zawsze wypełniał wszystkie pola, więc zamiast stylować je wg :required
czy :optional
, będziemy przypisywać style w zależności od nowego atrybutu – :valid
.
Wspomniany atrybut skupia się na polach które zostały wypełnione prawidłowo. To najprostszy sposób na pokazanie użytkownikowi strony, że dobrze wypełnił dane pole i może przejść do następnego.
Sprawdź poniższy przykład jak zastosowałem powyższy atrybut:
pensive-lovelace-p8j01
pensive-lovelace-p8j01 danielminschinski
Powyższe sposoby ułatwiają ostylować nasze formularze. Poćwicz w różnych konfiguracjach. Najważniejsze, aby znać odpowiednie pseudoklasy.
Za tydzień w środę udostępnię Wam materiał o stylowaniu inputów i wyjątkach z tym związane.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA