W podanym stylu CSS reguła dotyczy elementu <input> i zawiera cztery deklaracje, które muszą być spełnione jednocześnie. To oznacza, że poprawny wybór ma odpowiadać całemu "zestawowi" cech wizualnych, a nie tylko jednej z nich.
1) border: none usuwa domyślne obramowanie pola ze wszystkich stron. Dlatego poprawne pole nie powinno mieć widocznych ramek po bokach ani na górze.
2) border-bottom: 2px solid Blue dodaje wyłącznie dolną krawędź obramowania: linię o grubości 2 piksele, ciągłą (solid) i w kolorze niebieskim. Efekt wizualny to popularne "podkreślenie" pola formularza.
3) color: Gray dotyczy koloru tekstu wpisanego w pole. Tekst powinien być szary, niezależnie od koloru obramowania.
4) font-weight: 900 ustawia bardzo dużą grubość pisma (ultra-bold). To nie jest lekkie pogrubienie, tylko wyraźnie cięższy krój.
Dlaczego Input 2 jest poprawny? Ponieważ jako jedyny jednocześnie: nie ma ramki z lewej, prawej i górnej strony, ma tylko niebieską linię na dole, a tekst jest i szary, i mocno pogrubiony.
Dlaczego pozostałe odpowiedzi są błędne?
- Input 1: widoczne jest dodatkowe obramowanie (nie spełnia border: none), mimo że ma niebieski dół i pogrubiony szary tekst.
- Input 3: ma pełną niebieską ramkę wokół (sprzeczne z border: none) oraz zbyt cienką czcionkę (nie spełnia font-weight: 900).
- Input 4: ma poprawny "underline", ale kolor tekstu jest niebieski, więc nie spełnia deklaracji color: Gray.
Wskazówka egzaminacyjna: przy takich zadaniach odhaczaj warunki jeden po drugim (ramki, dół, kolor tekstu, grubość czcionki). To ogranicza ryzyko wyboru "prawie pasującego" przykładu.
