Formularz ze stylizowanymi etykietami
Jak stylizować etykietę formularza za pomocą CSS. Elementem formularza używanym do etykietowania różnych pól i obszarów wejściowych na formularzu strony internetowej jest element label. Można go stylizować za pomocą reguł kaskadowego arkusza stylów.
Krok 1
Aby stylizować elementy label tak, jak wyglądają na obrazku we wstępie, musisz użyć elementu label z atrybutem „for”. Ponadto musisz zamknąć element label przed dodaniem samego elementu „input”. Kod HTML pełnego formularza pokazano na ilustracji.
Wideo dnia
Krok 2
Aby nadać styl elementom etykiet, sprawiłem, że etykiety były wyświetlane jako elementy na poziomie bloku, które pływały w lewo. Następnie przypisałem szerokość etykietom, aby wszystkie pola wejściowe znajdowały się w jednakowej odległości od etykiet. Przypisałem kolor i pogrubiłem tekst. Użyłem wygenerowanej treści, aby dodać dwukropek (: ) po etykiecie. (Dwukropek może nie pojawiać się w każdej przeglądarce.)
Oto CSS:
etykieta { kolor: #B4886B; grubość czcionki: pogrubiona; Blok wyświetlacza; szerokość: 150px; pływak: lewy; } etykieta: po { content: ": " }
Krok 3
Dla kompletności pokażę również CSS używany do stylizacji zestawu pól, ponieważ elementy etykiety są otoczone obramowanym zestawem pól.
Oto ten CSS:
fieldset { border: 1px solid #CCA383; szerokość: 400px; tło: #FFE8EF; wypełnienie: 3px; } legenda zestawu pól { background: #CCA383; wypełnienie: 6px; grubość czcionki: pogrubiona; }
Krok 4
Możesz zrobić wiele innych rzeczy, aby nadać styl elementom etykiety. Mój przykład to tylko jeden ze sposobów na zrobienie tego.
HTML formularza
Rzeczy, których będziesz potrzebować
Praktyczna znajomość HTML
Praktyczna znajomość CSS
