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