Zmiana wyglądu pól formularza HTML z pomocą CSS

Czas czytania: 2 minut

Wygląd pól formularza HTML podobnie jak w przypadku innych elementów HTML można zmieniać z pomocą CSS. Aby tego jednak dokonać trzeba poznać kilka właściwości, które nam to umożliwią.

Zmiana wyglądu pola <input> w CSS

Zmiana wyglądu pola typu input w CSS z pozoru nie wydaje się specjalnie trudna. Jednak może się taka okazać szczególnie kiedy weźmie się pod uwagę ilość typów tego typu pola. Posiadamy przecieć typ:

• text – pole przeznaczone na krótki tekst (np. imię, nazwisko)
• number – pole na numer / liczbowe (np. na wiek)
• submit – przycisk wysyłania
• search – pole wyszukiwarki
• i wiele innych

Te pola nie zawsze a wręcz często nie powinny wyglądać tak samo. Dlatego też rozwiązanie typu odwołania się do elementu nie koniecznie się sprawdzi np.:

input{
padding: 5px;
}

---

Wybrane typy pola input – jak się do nich odwołać w CSS

W celu poprawnego skonfigurowania będzie nam potrzebne określenie typu pola.

• input[type=text] – działa tylko na pole tekstowe. Używamy kiedy chcemy działać na pole z zwykłym tekstem
• input[type=reset] – odwołuje się do pola reset. Czyli do pola resetującego zawartość formularza
• input[type=search] – oddziaływane na pole search, czyli szukaj
• i tak dalej

W CSS modyfikujący pole może to wyglądać następująco:

input[type=text]{
padding: 5px;
background: #cccc;
}
input[type=submit]{
padding: 15px;
}

Przykład:

Twoje imię:

W ten sposób możemy korzystając z różnego typu właściwości CSS manipulować polami input.

---

Szerokości pola i jej zmiana (zwiększanie i zmniejszanie)

Poniżej znajduje się kilka przykładów testowego pola formularza, które pod wpływem różnych czynności zmieniają swoje rozmiary. Do czynności tych zaliczamy:

• najechanie kursorem myszy
• kliknięcie w pole

---

placeholder – domyślny, przykładowy tekst w polu formularza

Pole możemy uzupełnić przykładowymi wartościami na 2 sposoby. Możemy więc użyć value lub placeholder. Ta pierwsza wypełni nam pole normalnym tekstem takim jak my sami wpisujemy ta druga z kolei doda tekst w tle.

 value -> <input type="text" name="imie" value="imię" /><br><br>
 placeholder -> <input type="text" name="imie" placeholder="imię" />

value ->

placeholder ->

Do placeholder odwołujemy się następująco:

input::placeholder {
  color: blue;
  font-style: italic;
}

caret-color

Tym razem zmienimy kolor pionowej kreski (do wpisywania) w polu input. W praktyce właściwość ta działa analogicznie jak właściwość color.

caret-color: red;

Zmiana wyglądu <select> i <textarea>

W przypadku pola typu select w dużym stopniu działamy tak jak przy zwykłym polu HTML. np:

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 6px;
  background-color: #ccc;
}