Formularze CSS
Wygląd formularza HTML można znacznie poprawić za pomocą CSS:
Stylowanie pól wejściowych
Użyj widthwłaściwości, aby określić szerokość pola wejściowego:
Przykład
input
{
width: 100%;
}
Powyższy przykład dotyczy wszystkich elementów <input>. Jeśli chcesz nadać styl tylko określonemu typowi danych wejściowych, możesz użyć selektorów atrybutów:
input[type=text]- zaznaczy tylko pola tekstoweinput[type=password]- wybierze tylko pola hasłainput[type=number]- wybierze tylko pola liczbowe- itp..
Wejścia usztywniane
Użyj paddingwłaściwości, aby dodać spację wewnątrz pola tekstowego.
Wskazówka: jeśli masz wiele wejść po sobie, możesz również dodać kilka margin, aby dodać więcej miejsca poza nimi:
Przykład
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Zauważ, że ustawiliśmy box-sizingwłaściwość na
border-box. Daje to pewność, że dopełnienie i ewentualnie obramowania są uwzględnione w całkowitej szerokości i wysokości elementów.
Przeczytaj więcej o box-sizingwłaściwości w naszym rozdziale CSS Box Sizing .
Obramowane wejścia
Użyj borderwłaściwości, aby zmienić rozmiar i kolor obramowania oraz użyj border-radiuswłaściwości, aby dodać zaokrąglone rogi:
Przykład
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Jeśli chcesz tylko dolnego obramowania, użyj border-bottomwłaściwości:
Przykład
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Kolorowe wejścia
Użyj background-colorwłaściwości, aby dodać kolor tła do danych wejściowych i colorwłaściwości, aby zmienić kolor tekstu:
Przykład
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Wejścia skoncentrowane
Domyślnie niektóre przeglądarki dodadzą niebieski kontur wokół danych wejściowych, gdy zostaną one aktywowane (kliknięte). Możesz usunąć to zachowanie, dodając outline: none;do danych wejściowych.
Użyj :focusselektora, aby zrobić coś z polem wejściowym, gdy zostanie ono uaktywnione:
Przykład
input[type=text]:focus
{
background-color: lightblue;
}
Przykład
input[type=text]:focus
{
border: 3px solid #555;
}
Wejście z ikoną/obrazem
Jeśli chcesz, aby ikona znajdowała się wewnątrz danych wejściowych, użyj background-imagewłaściwości i umieść ją razem z background-positionwłaściwością. Zwróć też uwagę, że dodaliśmy dużą lewą wyściółkę, aby zarezerwować 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;
}
Animowane wprowadzanie wyszukiwania
W tym przykładzie używamy transitionwłaściwości CSS, aby animować szerokość danych wejściowych wyszukiwania, gdy staje się on aktywny. Więcej o właściwości dowiesz się
transitionpóźniej, w naszym rozdziale Przejścia CSS .
Przykład
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Stylizacja obszarów tekstowych
Wskazówka: Użyj resizewłaściwości, aby zapobiec zmianie rozmiaru obszarów tekstowych (wyłącz „chwytacz” 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;
}
Stylizacja Wybierz menu
Przykład
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Przyciski wprowadzania stylu
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;
}
/* Tip: use width: 100% for full-width buttons */
Aby uzyskać więcej informacji na temat stylizacji przycisków za pomocą CSS, przeczytaj nasz samouczek dotyczący przycisków CSS .
Formularz responsywny
Zmień rozmiar okna przeglądarki, aby zobaczyć efekt. Gdy ekran ma mniej niż 600 pikseli szerokości, ustaw dwie kolumny na sobie, a nie obok siebie.
Zaawansowane: w poniższym przykładzie użyto zapytań o media do utworzenia formularza responsywnego. Więcej na ten temat dowiesz się w kolejnym rozdziale.