Изучение стилей форм с помощью CSS — отличный способ улучшить внешний вид вашего сайта. HTML-формы, возможно, являются одними из самых уродливых вещей на большинстве веб-страниц. Они часто скучны и утилитарны и не предлагают много стиля.
С CSS это может измениться. Комбинация CSS с более продвинутыми тегами форм может дать некоторые красивые формы.
Изменить цвета
Как и в случае с текстом, вы можете изменить основной и фоновый цвета элементов формы. Простой способ изменить цвет фона почти каждого элемента формы — использовать свойство background-color в теге input. Например, этот код применяет синий цвет фона (# 9cf) ко всем элементам.
input {
background-color: # 9cf;
цвет: # 000;
}
Чтобы изменить цвет фона только определенных элементов формы, просто добавьте «textarea» и выберите стиль. Например:
input, textarea, выберите {
background-color: # 9cf;
цвет: # 000;
}
Обязательно измените цвет текста, если вы сделаете фон темным. Контрастные цвета помогают сделать элементы формы более разборчивыми. Например, текст на темно-красном фоне намного легче читается, если цвет текста белый. Например, этот код помещает белый текст на красном фоне.
input, textarea, выберите {
background-color: # c00;
цвет: #fff;
}
Вы даже можете поместить цвет фона на сам тег формы. Помните, что тег формы является блочным элементом , поэтому цвет заполняет весь прямоугольник, а не только расположение элементов. Вы можете добавить желтый фон к элементу блока, чтобы выделить область, например так:
form {
background-color: #ffc;
}
Добавить границы
Как и в случае с цветами, вы можете изменить границы различных элементов формы. Вы можете добавить одну рамку вокруг всей формы. Обязательно добавьте отступы, иначе элементы формы будут застревать прямо рядом с границей. Вот пример кода для черной границы в 1 пиксель с отступом 5 пикселей:
форма {
border: 1px solid # 000;
обивка: 5px;
}
Вы можете поместить границы вокруг больше, чем просто сама форма. Измените границу элементов ввода, чтобы они выделялись:
input {
border: 2px dashed # c00;
}
Будьте осторожны, когда вы ставите границы на поля ввода, так как они меньше похожи на поля ввода, и некоторые люди могут не осознавать, что могут заполнить форму.
Сочетание стилей
Собрав все элементы формы с мыслью и немного CSS, вы можете создать красивую форму, которая дополняет полный дизайн и макет вашего сайта.