Formularze CSS

Dzięki CSS można znacznie poprawić wygląd HTML formularzy:

Spróbuj sam

ustawianie stylu dla pola wejściowego

Użyj width atrybut określa szerokość pola wejściowego:

Przykład

input {
  width: 100%;
}

Spróbuj sam

W przykładzie tym dotyczy to wszystkich elementów <input>. Jeśli chcesz ustawić styl dla określonego typu pola wejściowego, możesz użyć selektora atrybutu:

  • input[type=text] - wybierze tylko pola tekstowe
  • input[type=password] - wybierze tylko pola hasła
  • input[type=number] - wybierze tylko pola liczbowe
  • i tak dalej...

wypełnienie pól wejściowych

Użyj padding atrybut dodaje przestrzeń w polu tekstowym.

Wskazówka:Jeśli masz wiele pól wejściowych, możesz również dodać marginesy, aby dodać więcej przestrzeni poza nimi:

Przykład

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Spróbuj sam

Proszę zauważyć, że ustawiliśmy box-sizing atrybut ustawiony na border-boxto zapewni, że całkowita szerokość i wysokość elementu zawiera wewnętrzne marginesy (wypełnienie) i ostateczne obramowanie.

Proszę użyć naszej CSS Box Sizing w tym rozdziale nauczysz się o box-sizing dowiedzieć się więcej o atrybucie.

pole wejściowe z obramowaniem

Proszę użyć border atrybut zmienia grubość i kolor obramowania, a następnie używa border-radius atrybut dodaje zaokrąglenia:

Przykład

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Spróbuj sam

Jeśli potrzebujesz tylko dolnego obramowania, użyj border-bottom Atrybut:

Przykład

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Spróbuj sam

kolorowych pól wejściowych

Proszę użyć background-color atrybut dodaje kolor tła do pola wejściowego, a następnie używa color atrybut zmienia kolor tekstu:

Przykład

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Spróbuj sam

pole wejściowe o fokusie

Domyślnie, niektóre przeglądarki dodają niebieski kontur wokół pola wejściowego, gdy uzyskuje ono fokus (kliknięcie). Możesz to zmienić, dodając do pola wejściowego outline: none; aby wyeliminować to zachowanie.

Użyj :focus Selektor może ustawić styl dla pola wejściowego, gdy uzyskuje ono fokus:

Przykład 1

input[type=text]:focus {
  background-color: lightblue;
}

Kliknij w pole tekstowe:

Spróbuj sam

Przykład 2

input[type=text]:focus {
  border: 3px solid #555;
}

Kliknij w pole tekstowe:

Spróbuj sam

input box with icon/image

Jeśli chcesz umieścić ikonę w polu wejściowym, użyj Atrybut i połączyć go z Atrybut Atrybuty razem ustawione. Należy również zauważyć, że dodaliśmy większy lewy wewnętrzny margines (padding-left), aby zostawić miejsce na ikonę:

Przykład

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Spróbuj sam

search input box with animation

W tym przykładzie używamy CSS transition Atrybut ustawia animację zmiany szerokości podczas uzyskiwania fokusowania pola wyszukiwania. Później, w naszych CSS przejścia w jednym rozdziale nauczymy się więcej o transition znajomość atrybutów.

Przykład

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Spróbuj sam

Ustawienia stylu pola tekstowego

Wskazówka:Użyj resize Atrybut zapobiega zmianie rozmiaru textareas (wyłącza grabber w prawym dolnym rogu):

Przykład

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Spróbuj sam

Ustawienia stylu menu wyboru

Przykład

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

Spróbuj sam

Ustawienia stylu przycisku wejściowego

Przykład

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Wskazówka: użyj width: 100%, aby uzyskać przycisk pełnej szerokości */

Spróbuj sam

Dowiedz się więcej o ustawianiu stylów przycisków za pomocą CSS, nauka naszej CSS przyciski Tutorial.

Menu responsywne

Proszę dostosować rozmiar okna edytora TIY, aby zobaczyć efekty. Kiedy szerokość ekranu jest mniejsza niż 600 pikseli, dwie kolumny są układane pionowo zamiast poziomo.

Zaawansowane: następne przykłady używają Zapytania media Stwórz formularz responsywny. W następnym rozdziale nauczysz się więcej na ten temat.

Zobacz menu responsywne