Wygląd formularza HTML można znacznie poprawić z CSS:
Stylizacja pól wejściowych
Użyj width właściwość, aby określić szerokość pola wejściowego:
Powyższy przykład dotyczy wszystkich <input> elementów. Jeśli chcesz tylko do stylu konkretnego rodzaju sygnału wejściowego, można użyć selektorów atrybutów:
-
input[type=text]- zaznacza tylko pola tekstowe -
input[type=password]- będzie tylko wybrane pola hasła -
input[type=number]- zaznacza tylko pól numerycznych - itp..
Wejścia wyściełane
Użyj padding właściwość, aby dodać przestrzeń wewnątrz pola tekstowego.
Wskazówka: Jeśli masz wiele wejść po drugim, możesz również dodać jakiś margin , aby dodać więcej miejsca na zewnątrz z nich:
Przykład
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Spróbuj sam "  | Należy pamiętać, że mamy ustawić box-sizing właściwość border-box . Daje to pewność, że wyściółka i ewentualnie granice włączone w całkowitej szerokości i wysokości elementów. Czytaj więcej o box-sizing nieruchomości w naszej CSS3 Box Dobór rozdziału. |
|---|
graniczy Wejścia
Użyj border własności, aby zmienić rozmiar i kolor obramowania i użyć border-radius właściwość, aby dodać zaokrąglone narożniki:
Jeśli chcesz tylko dolną granicę, należy użyć border-bottom właściwość:
Kolorowe Wejścia
Użyj background-color właściwość, aby dodać kolor tła do wejścia, a color własność, aby zmienić kolor tekstu:
Koncentruje Wejścia
Domyślnie niektóre przeglądarki doda niebieski kontur wokół wejścia, gdy robi się skupić (kliknięciu). Można usunąć ten problem, dodając outline: none; do wejścia.
Użyj :focus selektor coś zrobić z pola wprowadzania, gdy robi się skupić:
Wejście z ikoną obrazu /
Jeśli chcesz ikonę wewnątrz wejście, użyj background-image własności i umieścić go z background-position nieruchomości. Zauważ też, że dodamy dużą lewy dopełnienie zarezerwować przestrzeń 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 " Animowane Input Search
W tym przykładzie używamy CSS3 transition własności animować szerokość wejścia wyszukiwania, gdy robi się skupić. Dowiesz się więcej na temat transition własności później, w naszym CSS3 Transitions rozdziału.
Przykład
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Spróbuj sam " Stylizacja pola tekstowe
Wskazówka: Użyj resize właściwość, aby zapobiec pola tekstowe przed zmieniany (wyłącz "łapacz" 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 " Styling Wybierz dietetyczne
Przykład
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Spróbuj sam " Stylizacja przycisków wyboru wejścia
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 */ Spróbuj sam " Aby uzyskać więcej informacji o tym, jak projektować przyciski z CSS, przeczytaj nasz CSS Przyciski Tutorial .