CSS dla pól wejściowych formularzy i pól tekstowych

Dzisiaj czytelnik poinformował mnie, że pola wejściowe w moim formularzu kontaktowym są mało czytelne, ponieważ pismo jest tak małe. Rzuciłem okiem na to i mogłem się tylko z nią zgodzić: rozmiar czcionki był znacznie mniejszy niż w tekście głównym na moim blogu. Aby to dostosować, możesz dodać niestandardowy kod CSS w ustawieniach motywu, którego możesz użyć do zmiany wyglądu pól wejściowych i pól tekstowych w formularzu.

Klasa CSS dla formularza jako punkt wyjścia

Najlepszym sposobem na zmianę formularza jest nadanie mu klasy, którą następnie definiujesz w CSS. W kodzie źródłowym HTML tagu formularza wygląda to tak:

W samym CSS możesz następnie utworzyć definicję ze zmianami rozmiaru czcionki i innych atrybutów:

.wpcf7-form input[type="tekst"], .wpcf7-form input[type="email"], .wpcf7-form textarea { font-size:120%; kolor: #333333;}

W tym przykładzie nazwa „wpcf7-form” to klasa, którą wtyczka określa dla formularza kontaktowego. Możesz je oczywiście nazwać jak chcesz.

Możesz także być kreatywny z atrybutami. Na przykład możesz użyć obrazów jako tła dla elementów obszaru tekstowego lub bawić się kolorami i czcionkami. Wymienienie tutaj wszystkich opcji wykraczałoby poza zakres.

Elementy Select i Option

Nie potrzebowałem tych dwóch grup do mojego minimalistycznego formularza, ale jeśli chcesz również przeprojektować pola opcji i zaznaczyć pola, możesz to zrobić za pomocą następujących wpisów CSS:

.wpcf7-formularz grupa opt { rozmiar czcionki: 15pt; kolor: #ff0000;} .wpcf7-form select {szerokość: 250px; rozmiar czcionki: 1.2em;}

Mam nadzieję, że dzięki temu małemu przewodnikowi mogłem pomóc Ci w majstrowaniu przy CSS z formularzami HTML. Jeśli masz jakieś uzupełnienia lub pytania, dodaj je jako komentarze.

Jen Kleinholz( Założyciel i Sir Apfelot )

Jens prowadzi bloga od 2012 roku. Pełni rolę Sir Apfelot dla swoich czytelników i pomaga im w problemach natury technicznej. W wolnych chwilach jeździ na elektrycznych monocyklach, robi zdjęcia (najlepiej iPhonem oczywiście), wspina się po górach Hesji lub wędruje z rodziną. Jego artykuły dotyczą produktów Apple, nowości ze świata dronów czy rozwiązań aktualnych błędów.