Как оформить метку формы с помощью CSS

Как оформить метку формы с помощью CSS. Элемент формы, который используется для маркировки различных полей и областей ввода в форме веб-страницы, называется элементом метки. Для него можно задать стиль с помощью правил каскадной таблицы стилей.

Шаг 1

Чтобы стилизовать элементы метки так, как они отображаются на изображении во введении, вам нужно использовать элемент метки с атрибутом «для». Кроме того, вам нужно закрыть элемент метки перед добавлением самого элемента «ввод». HTML-код полной формы показан на иллюстрации.

Шаг 2

Чтобы стилизовать элементы меток, я сделал так, чтобы метки отображались как элементы блочного уровня, которые были смещены влево. Затем я присвоил меткам ширину, чтобы все поля ввода находились на одинаковом расстоянии от меток. Я назначил цвет и сделал текст жирным. Я использовал сгенерированный контент, чтобы добавить двоеточие (:) после метки. (Двоеточие может отображаться не во всех браузерах.)

Вот CSS:

метка {цвет:#B4886B; вес шрифта:полужирный; дисплей:блок; ширина:150 пикселей; плыть налево; } метка:после { содержание:":"

Шаг 3

Просто для полноты картины я также покажу вам CSS, используемый для стилизации набора полей, поскольку элементы метки заключены в набор полей с рамкой.

Вот этот CSS:

fieldset {граница:1px сплошная #CCA383; ширина:400 пикселей; фон:#FFE8EF; отступ:3px; } легенда набора полей { background:#CCA383; отступ:6px; вес шрифта:полужирный;

Шаг 4

Вы можете сделать много других вещей, чтобы стилизовать элементы метки. Мой пример — лишь один из способов сделать это.