Форма со стилизованными этикетками
Как стилизовать метку формы с помощью CSS. Элемент формы, который используется для маркировки различных полей и областей ввода на форме веб-страницы, является элементом метки. Его можно стилизовать с помощью правил каскадной таблицы стилей.
Шаг 1
Чтобы стилизовать элементы метки так, как они отображаются на изображении во введении, вам необходимо использовать элемент метки с атрибутом «for». Кроме того, вам необходимо закрыть элемент метки перед добавлением самого элемента «input». HTML для полной формы показан на иллюстрации.
Видео дня
Шаг 2
Чтобы стилизовать элементы меток, я сделал их отображаемыми как элементы уровня блока, которые были перемещены влево. Затем я назначил ширину меткам, чтобы все поля ввода находились на одинаковом расстоянии от меток. Я назначил цвет и выделил текст жирным шрифтом. Я использовал сгенерированный контент, чтобы добавить двоеточие (:) после метки. (Двоеточие может отображаться не во всех браузерах.)
Вот CSS:
label {color: # B4886B; font-weight: жирный; дисплей: блок; ширина: 150 пикселей; плыть налево; } label: после {content: ":"}
Шаг 3
Для полноты картины я также покажу вам CSS, используемый для стилизации набора полей, поскольку элементы метки заключены в набор полей с рамкой.
Вот этот CSS:
набор полей {граница: 1px solid # CCA383; ширина: 400 пикселей; фон: # FFE8EF; отступ: 3 пикселя; } легенда набора полей {background: # CCA383; отступ: 6 пикселей; font-weight: жирный; }
Шаг 4
Вы можете сделать много других вещей, чтобы стилизовать элементы метки. Мой пример - лишь один из способов сделать это.
Форма HTML
Вещи, которые вам понадобятся
Практическое знание HTML
Практическое знание CSS
