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

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 <input> w CSS

• 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

Zmiana wyglądu pola <input> w CSS

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:

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ę" />

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;
}