input { border: none; border-bottom: 2px solid Blue; color: Gray; font-weight: 900; } Wskaż pole edycyjne sformatowane przedstawionym stylem CSS
input { border: none; border-bottom: 2px solid Blue; color: Gray; font-weight: 900; }Wskaż pole edycyjne sformatowane przedstawionym stylem CSS
A. Input 4.
B. Input 2.
C. Input 3.
D. Input 1.
Pytanie z egzaminu CKE, styczeń 2024 (arkusz EE.09-SG-24.01).
Wybranie Input 2 wynika bezpośrednio z tego, jak działa pokazany styl CSS dla elementu input. Najpierw deklaracja border: none usuwa wszystkie domyślne obramowania pola formularza, czyli nie powinno być ramki dookoła. Potem border-bottom: 2px solid Blue dodaje tylko dolną krawędź, o grubości 2px, linią ciągłą i w kolorze niebieskim. W efekcie pole wygląda raczej jak podkreślona linia, a nie klasyczne prostokątne pole. Właściwość color: Gray ustawia kolor wpisywanego tekstu na szary, a font-weight: 900 daje bardzo mocne pogrubienie, o ile użyta czcionka obsługuje taką grubość. Moim zdaniem to dość typowy styl spotykany w nowoczesnych formularzach, np. w panelach logowania albo prostych formularzach kontaktowych, gdzie chce się uzyskać minimalistyczny wygląd. Warto też pamiętać, że nazwy kolorów w CSS, takie jak Blue i Gray, są rozpoznawane niezależnie od wielkości liter. W praktyce branżowej często jednak stosuje się wartości HEX, RGB albo zmienne CSS, bo są dokładniejsze i łatwiej utrzymać spójność projektu. Dobrą praktyką jest też dopisanie stylu dla stanu focus, żeby użytkownik widział, które pole jest aktywne, bo sama cienka dolna linia czasem bywa mało czytelna.
Jeżeli wybrane zostało inne pole niż Input 2, to najpewniej pomylony został ogólny wygląd pola formularza z konkretnymi właściwościami CSS. Ten fragment stylu nie tworzy pełnej ramki wokół inputa. Deklaracja border: none kasuje całe obramowanie, a dopiero później border-bottom dodaje jedynie dolną linię. To ważny szczegół, bo w CSS kolejność i relacja między właściwością skróconą a właściwością szczegółową mają realne znaczenie. border ustawia wszystkie krawędzie, a border-bottom nadpisuje tylko dolną. Dlatego pole z ramką z każdej strony, nawet jeśli ma kolor niebieski, nie pasuje do tego kodu. Tak samo pole bez pogrubionego szarego tekstu też nie będzie zgodne z podanym stylem. Częsty błąd polega na patrzeniu tylko na jeden element, na przykład niebieski kolor, i pomijaniu reszty deklaracji. A tutaj trzeba sprawdzić cały zestaw: brak górnej, lewej i prawej ramki, niebieskie podkreślenie, szary kolor tekstu oraz bardzo gruba odmiana fontu. Warto też nie mylić koloru tekstu z kolorem placeholdera. Właściwość color wpływa na zwykły tekst wpisany w pole, natomiast placeholder często wymaga osobnego selektora ::placeholder. Z mojego doświadczenia takie pytania najlepiej rozwiązywać krok po kroku, czytając CSS od góry do dołu, bo wtedy łatwo zauważyć, które ustawienie usuwa domyślny wygląd, a które buduje nowy.