Формуляр със стилизирани етикети
Как да стилизирате етикет на формуляр с CSS. Елемент на формуляр, който се използва за етикетиране на различните полета и области за въвеждане във формуляра на уеб страница, е елементът етикет. Може да се оформя с помощта на правилата на каскадния стилов лист.
Етап 1
За да стилизирате елементите на етикета по начина, по който се появяват в изображението във въведението, трябва да използвате елемента етикет с атрибута „for“. Освен това трябва да затворите елемента етикет, преди да добавите самия елемент "вход". HTML за пълния формуляр е показан на илюстрацията.
Видео на деня
Стъпка 2
За да стилизирам елементите на етикета, направих етикетите да се показват като елементи на ниво блок, които бяха плаващи вляво. След това зададох ширина на етикетите, така че всички полета за въвеждане да са на еднакво разстояние от етикетите. Зададох цвят и направих текста удебелен. Използвах генерирано съдържание, за да добавя двоеточие (: ) след етикета. (Детото двоето може да не се появи във всеки браузър.)
Ето CSS:
етикет { цвят: #B4886B; шрифт-тегло: получер; дисплей: блок; ширина: 150px; float: ляво; } етикет: след { content: ": " }
Стъпка 3
Само за пълнота ще ви покажа и CSS, използван за стилизиране на набора от полета, тъй като елементите на етикета са оградени от полета с граници.
Ето този CSS:
fieldset { border: 1px solid #CCA383; ширина: 400px; фон: #FFE8EF; допълване: 3px; } легенда на набор от полета { фон: #CCA383; допълване: 6px; шрифт-тегло: получер; }
Стъпка 4
Можете да направите много други неща, за да стилизирате елементите на етикета. Моят пример е само един от начините да го направя.
Формулярът HTML
Неща, от които се нуждаете
Работни познания по HTML
Работни познания по CSS
