Автор выбрал Фонд разнообразия в технологиях для получения пожертвования в рамках программы Напиши ради донатов.
Введение
Веб-формы являются обычным элементом дизайна веб-сайтов, варьируясь по сложности от поля поиска до форм обратной связи и сложной фильтрации данных. Знание того, как использовать CSS для стилизации и работы с этими элементами, помогает предоставить лучшие решения для этих повседневных проблем и может улучшить опыт пользователя вашего веб-сайта.
Этот учебник охватывает создание и стилизацию веб-формы, запрашивающей различные данные от пользователя. Форма будет использовать текстовые поля, радиокнопки, флажки, выпадающие списки, текстовую область, а также кнопки отправки и сброса. Вы создадите и стилизуете эту форму и ее элементы с помощью сброса стилей с использованием свойства appearance, установки собственного согласованного стиля для формы, добавления заполнителей для текстовых полей и настройки радиокнопок и флажков с использованием различных псевдоклассов и псевдоэлементов.
Предварительные требования
- Опыт использования расширенных селекторов для поиска и применения стилей к HTML-элементам с помощью CSS. Для получения дополнительной информации обратитесь к учебному пособию Как выбрать HTML-элементы с использованием селекторов ID, Class и Attribute в CSS.
- Знание модели блочной компоновки CSS, которое вы можете найти в учебном пособии Как работать с моделью блока в CSS.
- Ознакомление с псевдоклассами в CSS. Посмотрите учебное пособие Как использовать ссылки и кнопки с псевдоклассами состояния в CSS для введения в тему.
- Пустой файл HTML, сохраненный на вашем локальном компьютере под названием
index.html, который вы можете открыть в текстовом редакторе и выбранном вами веб-браузере. Чтобы начать, ознакомьтесь с нашим учебным пособием Как настроить ваш проект HTML, и следуйте инструкциям из учебного пособия Как использовать и понимать HTML-элементы для просмотра HTML в браузере. Если вы новичок в HTML, попробуйте весь ряд уроков Как создать веб-сайт с помощью HTML.
Настройка базового HTML и CSS
В этом первом разделе вы настроите HTML и начальные стили, с которыми будете работать на протяжении всего урока. Этот HTML установит каркас страницы и создаст поля формы, которые вы стилизуете позже.
Начните с открытия файла index.html в вашем редакторе. Затем добавьте следующий HTML, чтобы обеспечить базовую структуру файла:
Элементы, содержащиеся в элементе <head>, определяют имя страницы с помощью элемента <title> и место загрузки таблицы стилей через элемент <link>. Теги <meta> определяют кодировку символов и указывают браузеру, как отображать сайт на устройствах со смаленькими экранами. Основное содержимое формы будет находиться внутри тегов <body> и <main>.
Затем внутри элемента <main> создайте элемент <form>. Внутри <form> вы добавите различные элементы формы и элементы <div>, чтобы помочь с макетом. В этом учебнике изменения в коде из предыдущих шагов выделены. Добавьте выделенный HTML из следующего блока кода в ваш файл index.html:
Структура HTML-формы состоит из взаимосвязанных значений атрибутов для правильной работы. Этот код создает форму, которая запрашивает у пользователя его имя и электронную почту, спрашивает его о его любимом компиляторе CSS и знании сетки CSS, предоставляет поле для сообщения пользователя и имеет флажок для подписки пользователя на новостную рассылку. Чтобы узнать больше о том, как структурировать формы в HTML, см. страницу документации Mozilla Web Docs по структуре веб-форм.
Не забудьте сохранить ваши изменения в файле index.html, затем создайте новый файл в том же каталоге с именем styles.css.
Откройте файл styles.css в вашем текстовом редакторе. Этот файл содержит стили, которые браузер будет применять к содержимому index.html. Добавьте следующий CSS-код в ваш файл styles.css:
Селекторы элементов body и main создают начальное оформление текста и макет для всей страницы. Селектор элемента form создает стили для общего контейнера формы, а затем определяет сетку CSS, состоящую из двух столбцов равного размера с помощью grid-template-columns: 1fr 1fr;. Затем gap: 2rem устанавливает расстояние 2rem между каждой строкой и столбцом в сетке. Наконец, селектор класса .full-width позволяет контейнерам с этим классом растягиваться между двумя столбцами вместо того, чтобы оставаться в одном столбце.
Сохраните ваши изменения в styles.css. Затем откройте веб-браузер по вашему выбору. Выберите пункт меню Файл в браузере, а затем выберите опцию Открыть. Затем перейдите в папку вашего проекта и загрузите ваш файл index.html в браузере. На следующем изображении показано, как страница будет отображаться в браузере:
Форма отображается в белом прямоугольнике на светло-сером фоне. Каждый элемент формы распределен по сетке таким образом, что верхние четыре элемента чередуются между двумя столбцами, а последние три находятся в стопке, охватывая два столбца. Стилизация по умолчанию элементов формы такова, как они отображаются в Firefox; каждый браузер имеет различные стили по умолчанию для элементов формы.
В этом разделе вы настроили начальный HTML и CSS, необходимый для работы с элементами формы. Вы также узнали, что каждый браузер обрабатывает стилизацию этих элементов по-разному. В следующем разделе вы будете использовать свойство appearance для выравнивания стилей элементов формы во всех браузерах.
Сброс стилизации формы с помощью свойства appearance
Каждый браузер обрабатывает визуальное оформление элементов формы по-разному. Часто стилизация этих элементов выходит за рамки первоначальных возможностей CSS и следует эстетике операционной системы или собственного дизайна браузера. Для создания единообразного оформления для всех браузеров в этом разделе вы будете использовать свойство appearance и другие свойства для удаления стандартных стилей браузера.
Для начала откройте styles.css в вашем текстовом редакторе. Создайте новый групповой селектор, состоящий из button, fieldset, input, legend, select и textarea. Затем внутри блока селектора добавьте свойство appearance, установленное в none, как показано в следующем блоке кода:
Свойство appearance предназначено для удаления специального оформления элементов формы. Однако из-за возраста и реализации этого свойства большинство браузеров по-прежнему требуют добавления префикса поставщика к имени свойства. Префикс поставщика – это специальное кодированное дополнение, добавленное к имени свойства в качестве идентификатора для определенного браузера. Для Chrome, Safari и последних версий Edge и Opera этот префикс – -webkit-. Firefox использует префикс -moz-.
При работе с вендорными префиксами важно сначала указывать версии свойства с вендорным префиксом, а затем заканчивать с непрефиксной версией. Таким образом, старые браузеры, которые поддерживают только префиксированное свойство, будут использовать префикс, но новые браузеры, которые поддерживают как префикс, так и непрефиксированные версии, будут использовать непрефиксированную стандартную версию. Добавьте выделенные префиксные свойства `appearance`, как показано в следующем блоке кода:
Сохраните внесенные изменения в файле `styles.css`, а затем откройте `index.html` в вашем браузере. Свойства `appearance` удалены украшенного стиля и перешли к более простому стилю, как показано на следующем изображении:
Свойство `appearance` позволяет изменять специфичные для браузера стили. Самое большое изменение, которое внесло значение свойства `appearance: none`, состояло в полном удалении переключателей и флажков. Для остальных элементов формы требуется еще несколько свойств, чтобы полностью удалить стандартные стили. Выделенные CSS-свойства в следующем блоке кода добавляют необходимые стили для удаления стандартных стилей:
Этот CSS удаляет цвет фона и сбрасывает параметры модели блока. Не все эти стили необходимы для всех элементов, но допустимо группировать эти сбросы стилей для всех элементов.
Сохраните внесенные изменения в файле `styles.css`, затем обновите `index.html` в браузере. Элементы формы визуально исчезли со страницы, как показано на следующем изображении:
В этом разделе вы использовали внешний вид и дополнительные свойства, чтобы полностью удалить стандартные стили элементов формы. Вы также использовали вендорные префиксы для правильного применения свойства для будущих версий браузера. В следующем разделе вы начнете настраивать визуальное оформление полей формы.
Установка однородных стилей для полей формы
Теперь, когда стандартные стили браузера полностью удалены, вы примените однородный пользовательский внешний вид ко всем элементам формы. Это потребует создания различных групповых селекторов, которые нацелены на конкретные характеристики формы, чтобы получить соответствующие стили.
Для начала откройте файл styles.css в вашем текстовом редакторе. Затем создайте групповой селектор, состоящий из input, select и textarea. Добавьте выделенные стили из следующего блока кода:
Эти стили добавляют 2px тёмно-серую рамку вокруг каждого из элементов ввода данных, а также белый фон и закругленные углы.
Затем вы примените стили для элементов ввода данных, которые содержат текст внутри. Вы будете использовать селектор атрибута, чтобы указать, на какие элементы input нацелиться в зависимости от значения их атрибута type. Выделенный CSS в следующем блоке кода предоставляет стили для необходимых элементов:
Эти стили применяют одинаковый размер и семейство шрифтов для всех элементов. Например, элемент <textarea> не наследует настройки шрифта от элемента body. Свойства display, box-sizing, width и padding обеспечивают однородный макет и структуру для каждого из этих элементов ввода данных.
Сохраните ваши изменения в файле styles.css, а затем откройте index.html в вашем веб-браузере. Как показано на следующем изображении, поля теперь имеют более толстую темно-серую рамку вокруг них, а текст элемента <select> теперь намного больше:
Затем есть два элемента, которые нуждаются в дополнительном оформлении, помимо широкого оформления, которое вы уже написали. Первое – увеличить высоту элемента textarea, а второе – применить пользовательскую стрелку выпадающего списка к элементу <select>.
Вернитесь в файл styles.css и добавьте селектор элемента textarea. Внутри блока селектора создайте свойство min-height, установленное на значение 10rem. Это создаст более крупную начальную область для заполнения текстом пользователем формы. Подсвеченный CSS в следующем блоке кода иллюстрирует, как это написано:
После добавления стилей для элемента textarea, следующим шагом является создание каталога image. Это можно сделать, запустив следующую команду в командной строке из того же каталога, что и ваши файлы index.html и styles.css:
Затем выполните следующую команду curl, чтобы загрузить первое изображение, с которым вы будете работать, в новый каталог images:
Загруженное вами изображение является SVG, который представляет собой язык разметки, аналогичный HTML, но используемый для рисования форм.
Чтобы добавить это новое изображение в элемент <select>, вернитесь к файлу styles.css. Затем создайте селектор элемента select и добавьте свойство background с выделенным значением из следующего блока кода:
Это свойство background загружает изображение в фон элемента <select> и не повторяет его. Затем оно центрирует изображение по вертикали с помощью center и сдвигает его от правого края на right 0.75rem.
Сохраните внесенные изменения в файле styles.css, затем вернитесь в браузер, чтобы обновить страницу. Теперь элемент <textarea> примерно вдвое превысил свою исходную высоту, а у элемента <select> появилась синяя стрелка, указывающая вниз, справа. Ниже приведено изображение, демонстрирующее, как это отображается в браузере:
На протяжении этого раздела вы создали пользовательский внешний вид для элементов ввода данных формы. Вы также создали фон для элемента <select>, заменив стандартную стрелку. В следующем разделе вы создадите пользовательские переключатели и флажки, а также примените выбранные состояния, когда они отмечены.
Настройка радиокнопок и флажков с псевдоклассом :checked
Теперь, когда вы создали базовый внешний вид формы, пришло время применить этот визуальный стиль к интерактивным элементам input с радиокнопками и флажками.
Начните с открытия файла styles.css в вашем текстовом редакторе. Вы измените элементы input с атрибутом type радиокнопок или флажков, чтобы у них были одинаковые значения высоты и ширины. Затем вы превратите радиокнопки в круги. Выделенные части следующего блока кода показывают, как это форматируется:
Свойство vertical-align предназначено для выравнивания элементов встроенного текста. Установив его значение middle, поля ввода будут находиться посередине выравнивания текста. Затем вход с радиокнопкой с свойством border-radius равным 50% создаст круг, потому что высота и ширина одинаковы.
Сохраните ваши изменения в файле styles.css, а затем откройте index.html в вашем браузере. Теперь две радиокнопки и флажок стали более крупными и заметными, как показано на следующем изображении:
Если вы взаимодействуете с радиокнопками или флажками, ничего не произойдет. Свойство appearance также удаляет индикаторы выбора для этих типов ввода. Затем вы будете использовать селектор псевдокласса :checked для применения стилей к выбранному элементу ввода.
Вернитесь в styles.css и создайте новый селектор для радиокнопки с псевдоклассом :checked. Затем внутри блока селектора добавьте background-image с radial-gradient, чтобы применить заполненный стиль к выбранным радиокнопкам. Выделенный CSS из следующего блока кода показывает, как это форматируется:
Функция calc() позволяет установить transparent свойство 1px после значения цвета, создавая сплошной синий круг внутри поля ввода.
Сохраните ваши изменения в styles.css и вернитесь к index.html в вашем браузере. Теперь радиокнопки имеют сплошной синий круг, окруженный белым внутри поля ввода. На следующем изображении показана выбранная радиокнопка Да:
Затем флажок будет использовать фоновое изображение для указания своего состояния :checked, аналогично стрелке выпадающего списка <select>.
Запустите следующую команду curl, чтобы загрузить изображение галочки в вашу директорию images:
Теперь, когда у вас есть загруженное и готовое к использованию изображение, вернитесь к styles.css в вашем текстовом редакторе.
Затем добавьте селектор input[type="checkbox"] с присоединенным псевдо-классом :checked. В блоке селектора добавьте свойство background, которое загружает изображение check.svg и масштабирует его, чтобы оно поместилось внутри рамки. Выделенный CSS в следующем блоке кода показывает, как это записывается:
Значения свойства background гарантируют, что изображение метки выбранного пункта находится по центру контейнера, не повторяется и масштабируется пропорционально на 75%.
Сохраните внесенные изменения в файл styles.css, а затем обновите страницу в браузере. При выборе флажка Подписаться на нашу рассылку теперь внутри него появляется галочка, как показано на следующем изображении:
В этом разделе вы создали настраиваемые переключатели и поля ввода, которые меняют свое состояние выбора с помощью псевдо-класса :checked. В следующем разделе вы стилизуете элементы <label> и <legend> на странице.
Добавление специальных стилей к меткам и легендам
Следующими элементами для стилизации являются элементы <label> и <legend> в форме. Будут использоваться два различных стиля: маленький стиль метки для переключателей и флажков, и большой стиль метки для остальных элементов.
Откройте файл index.html в вашем текстовом редакторе. Вы добавите атрибут class к каждому <label> и <legend> со значением либо large-label, либо small-label, как показано в следующем блоке кода:
...
<form>
<div>
<label for="name" class="large-label">Name</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Favorite CSS Compiler</label>
...
</div>
<div>
<fieldset>
<legend class="large-label">Are you familiar with CSS Grid?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Receive our newsletter?</label>
</div>
...
</form>
...
Сохраните эти добавления в файл index.html, затем откройте файл styles.css в вашем текстовом редакторе.
В файле styles.css добавьте селектор класса .large-label и добавьте следующие свойства, как показано в следующем блоке кода:
Эти стили устанавливают для элементов с классом large-label крупный и полужирный шрифт с размером 1.5rem, что эквивалентно 24px. Затем свойство margin-bottom создает небольшое расстояние между меткой и её контейнером.
Сохраните изменения в файле styles.css и откройте файл index.html в вашем веб-браузере. Текст метки над полем ввода данных будет крупным и полужирным, как показано на следующем изображении:
Вернитесь к файлу styles.css и создайте еще один селектор класса для .small-label. Поскольку это метки, находящиеся справа от радиокнопки или флажка, им потребуются немного другие стили отступа и размера по сравнению с .large-label. Добавьте показанный CSS в ваш файл styles.css из следующего блока кода:
vertical-align: middle будет немного смещать текст. Шрифт установлен на 1.25rem, что эквивалентно 20px, с шрифтом sans-serif. Свойства margin слева и справа создают пространство между полями ввода и меткой.
Сохраните ваши обновления в styles.css и обновите index.html в браузере. Метки рядом с радиокнопками и флажками теперь больше и обеспечивают больше промежутка, как показано на следующем изображении:
В этом разделе вы создали стили для двух различных типов меток в зависимости от их положения относительно значения ввода. Метки теперь выделяются, обеспечивая более простую читаемость и навигацию по всей форме. В следующем разделе вы предоставите пример форматирования данных с помощью атрибута placeholder.
Предоставление заполнителя с помощью псевдо-элемента ::placeholder
Заполнительный контент на элементе input или textarea предоставляет пользователям формы визуальное представление о том, какой тип информации запрашивается и как его форматировать. Атрибут placeholder добавляется в HTML со значением, описывающим его. Затем псевдо-элемент ::placeholder позволяет настраивать внешний вид текста.
Чтобы начать создание заполнителя контента, откройте index.html в вашем текстовом редакторе. Добавьте атрибут placeholder к текстовым полям для имени <input />, электронной почты <input /> и элементам <textarea>. Подсвеченный HTML в следующем блоке кода показывает, куда добавить placeholder и значение для использования:
Сохраните ваши изменения в index.html, затем откройте страницу в веб-браузере. Теперь эти три текстовых поля имеют контент внутри себя. Когда эти текстовые поля выбраны, и контент добавлен, текст заполнителя будет удален браузером. Следующее изображение иллюстрирует, как выглядят стандартные стили заполнителя в браузере:
Чтобы стилизовать placeholder, откройте styles.css в вашем текстовом редакторе. Добавьте групповой селектор для input::placeholder и textarea::placeholder. Убедитесь, что используете двойные двоеточия между селектором и псевдо-элементом, так как это то, как браузер распознает разницу между псевдо-классом и псевдо-элементом. Подсвеченный CSS в следующем блоке кода показывает, как это написано:
Одно, на что следует обратить внимание, это то, что Firefox требует установки значения opacity равного 1, чтобы иметь полное цветовое значение. В противном случае Firefox уменьшает opacity, затемняя цвет текста и вызывая проблемы доступности контраста цветов в зависимости от значения цвета. Поскольку это ситуация только для Firefox, комментарий объясняет назначение присутствия свойства opacity.
Сохраните ваши изменения в styles.css и вернитесь в браузер, чтобы обновить index.html. Теперь заполнитель текста имеет тот же синий цвет, что и используемая для стрелки выпадающего списка и выбранных состояний для переключателя и флажка. Ниже приведено изображение, иллюстрирующее, как браузер рендерит содержимое placeholder:
С этим разделом вы создали содержимое placeholder для полей ввода текста и стилизовали их с помощью псевдоэлемента ::placeholder. В следующем разделе вы создадите пользовательские стили для элементов формы <button>.
Создание интерактивных стилей кнопок
В веб-формах элементы <button> часто используются для отправки или сброса формы. В файле index.html есть две кнопки, одна с type равным submit, а другая – reset. Обе функционально полезны, но выполняют противоположные действия. Кнопка submit отправит форму на обработку, в то время как кнопка reset очистит все введенные данные из формы. Из-за этих различий в действиях элементы <button> также должны выглядеть различными.
Для начала откройте файл styles.css в вашем текстовом редакторе и создайте селектор элемента button. В этом блоке селектора вы добавите стили, которые общие для элементов submit и reset <button>, как показано в следующем блоке кода:
font устанавливает одинаковый стиль и размер шрифта для обоих кнопок. Затем border-radius добавляет закругленный угол для обеих кнопок. Свойство cursor изменяет стиль курсора на руку. Наконец, свойство padding определяет пространство вокруг внутренней части кнопки.
Сохраните ваши изменения в файл styles.css, а затем откройте файл index.html в вашем веб-браузере. Текст на кнопке увеличится, а пространство между текстом увеличится визуально из-за отступа. На следующем изображении показано, как кнопки отображаются в браузере:
Затем вернитесь в файл styles.css, чтобы добавить стили для каждого типа кнопок с помощью селектора атрибутов, нацеливаясь на каждую. Для кнопки submit добавьте синий background-color и белый цвет текста. Кнопка reset получит подчеркивание, похожее на ссылку, и margin для добавления большего пространства между кнопками. Добавьте выделенный CSS из следующего блока кода в ваш файл styles.css:
Сохраните эти дополнения в файле styles.css, а затем обновите файл index.html в вашем текстовом редакторе. Кнопка submit теперь выделяется синим цветом и белым текстом, в то время как кнопка reset является приглушенным подчеркнутым текстом, как показано на следующем изображении:
Элемент <button> по умолчанию не имеет состояния :hover, поэтому вы сейчас добавите его в свой стиль. Состояние :hover полезно для обеспечения визуальной обратной связи для пользователей, управляющих курсором, что курсор находится на кнопках.
Чтобы создать состояния :hover для этих элементов <button>, вернитесь к файлу styles.css в вашем текстовом редакторе. Установите для кнопки submit изменение цвета фона при наведении. Затем сделайте так, чтобы кнопка reset убирала подчеркивание при наведении. Подсвеченный HTML в следующем блоке кода показывает, как написать эти стили:
Сохраните ваши изменения в файле styles.css, а затем вернитесь в браузер, чтобы обновить index.html. Как показывает следующая анимация, элементы <button> меняют свои стили при наведении указателя мыши:
В этом разделе вы создали стили для элементов <button>, чтобы сделать их различия визуально заметными. Вы изменили, как выглядит курсор при наведении, изменив свойство cursor. Вы также создали пользовательские стили для применения к каждой кнопке, чтобы обеспечить дополнительную визуальную обратную связь. В последнем разделе вы обеспечите дополнительную визуальную обратную связь при создании стилей, когда элемент формы находится в использовании с псевдо-классом :focus.
Уточнение активных полей формы с помощью :focus
При заполнении формы важно, чтобы пользователь знал, над каким полем он в данный момент работает. Это можно сделать с помощью псевдокласса :focus. По умолчанию браузеры используют свойство outline для указания на то, что элемент имеет фокус, но иногда это может быть незаметным индикатором или может конфликтовать с другими визуальными аспектами дизайна. В этом разделе вы создадите пользовательское состояние :focus, которое соответствует эстетике вашей формы.
Чтобы начать работу со стилями состояния поля формы :focus, откройте файл styles.css в вашем текстовом редакторе. Создайте групповой селектор для input, select и textarea, все с псевдоклассом :focus, как показано в следующем блоке кода:
Эти стили удаляют стандартное значение outline браузера и заменяют его стилем с толстой синей обводкой, созданной с помощью свойства box-shadow. Первые три значения свойства box-shadow отвечают за расположение тени и ее размытие. Четвертое называется размытием, которое в данном случае создает обводку 4px вокруг элемента с фокусом.
Затем кнопки получат немного другое состояние фокуса, так как кнопка submit имеет такой же синий цвет. Цель и намерение состояния фокуса – привлечь заметное внимание к элементу с фокусом, поэтому вы будете различать эти контуры по-разному.
Добавьте селектор button:focus в styles.css. В блоке селектора отключите стандартный outline и добавьте свойство box-shadow. Значения размещения, размытия и распространения останутся такими же, как в полях ввода, но цвет будет черным вместо синего, как показано в следующем блоке кода:
Сохраните внесенные изменения в styles.css и вернитесь в браузер. Обновите index.html и начните нажимать клавишу Tab, чтобы фокус перемещался между каждым элементом в форме. В следующей анимации показано, как стиль фокуса применяется при изменении фокуса с помощью клавиши Tab:
В этом разделе вы создали стили состояния фокуса, которые обеспечивают четкую визуальную обратную связь, когда элемент формы имеет фокус. Этот визуальный стиль полезен для пользователей мыши, сенсорных устройств и клавиатуры.
Заключение
Формы являются обычным элементом веб-дизайна. Они позволяют пользователям взаимодействовать с приложениями, осуществлять поиск контента и предоставлять обратную связь. В этом учебнике вы создали и стилизовали полноценную форму. Вы удалили стандартные стили браузера с помощью свойства appearance и создали новый пользовательский эстетический вид для различных элементов. Вы использовали псевдокласс :checked для создания выбранных состояний для переключателей и флажков. Затем вы добавили содержимое placeholder и соответствующий стиль с использованием псевдоэлемента ::placeholder. После этого вы создали пользовательские стили кнопок и применили стили :focus, обеспечивая ценную визуальную обратную связь для пользователей формы.
Если вы хотите прочитать больше учебников по CSS, попробуйте другие учебники в серии Как стилизовать HTML с помощью CSS.
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css