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

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 na krótki tekst
  • number – pole na numer / liczbowe
  • 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 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

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

See the Pen
input width
by Aura (@Julka85)
on CodePen.0


placeholder – domyślny 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;
}

See the Pen
Untitled
by Aura (@Julka85)
on CodePen.0

%d bloggers like this: