Które z pól edycyjnych zostało wystylizowane według poniższego wzoru, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?
input { padding: 10px; background-color: Teal; color: white; border: none; border-radius: 7px; }
Pole 1
Pole 3
Pole 2
Pole 4
Pole 2 odpowiada podanemu stylowi CSS, bo widać w nim wszystkie najważniejsze cechy z reguły dla selektora input. Pole ma kolor tła Teal, biały tekst wpisany przez użytkownika, brak klasycznej ramki przeglądarki oraz zaokrąglone narożniki wynikające z border-radius: 7px. Dodatkowo padding: 10px powoduje, że napis Krzysztof nie jest przyklejony do krawędzi pola, tylko ma wygodny odstęp od góry, dołu i boków. To jest bardzo typowy sposób stylizowania formularzy w CSS: najpierw usuwa się domyślne obramowanie przez border: none, potem ustawia kolor tła, kolor tekstu i wewnętrzny margines. Z mojego doświadczenia właśnie padding najłatwiej rozpoznać wizualnie, bo zmienia wysokość pola i położenie tekstu. W praktyce warto też pamiętać o stanie focus, np. dodać outline lub box-shadow, bo całkowite usunięcie ramki może pogorszyć dostępność formularza dla osób korzystających z klawiatury.
Jeżeli wybrane zostało inne pole niż Pole 2, to najpewniej pomylone zostały pojedyncze właściwości CSS z całym zestawem stylów. W tym zadaniu trzeba patrzeć na komplet: padding: 10px, background-color: Teal, color: white, border: none oraz border-radius: 7px. Sam turkusowy kolor tła nie wystarcza, bo kilka pól może wyglądać podobnie pod względem barwy. Pole z ostrymi narożnikami nie pasuje, ponieważ border-radius powinien wyraźnie zaokrąglić rogi. Pole z czarnym tekstem również odpada, bo deklaracja color: white zmienia kolor wpisanej wartości, czyli imienia Krzysztof, na biały. Częsty błąd polega na tym, że patrzy się tylko na tło albo tylko na rozmiar pola, a CSS działa jako suma deklaracji. Trzeba też pamiętać, że padding nie ustawia szerokości całego pola wprost, tylko dodaje odstęp wewnętrzny między tekstem a krawędzią elementu. Domyślne wartości przeglądarki nadal mogą wpływać na szerokość inputa, ale border: none usuwa standardową ramkę, a border-radius daje miękkie narożniki. Moim zdaniem najlepsza metoda w takich pytaniach to odhaczać cechy po kolei: kolor tła, kolor tekstu, obramowanie, zaokrąglenie i odstęp tekstu od brzegu. Wtedy Pole 2 zostaje jako jedyna spójna odpowiedź.