Изменение шрифта и размера шрифта в HTML: input tag

Быстрый ответ

Если требуется срочно изменить шрифт элемента input, следует применить к нему свойства CSS font-family и font-size:

<input type="text" style="font-family: Arial, sans-serif; font-size: 16px;">

Теперь элемент <input> оформлен с использованием шрифта Arial и размером 16px.

Обобщённое применение стилей: использование селекторов

Оставьте инлайновые стили в пользу CSS-селекторов:

/* Селектор по ID */
#myStylishInput {
  font-family: 'Courier New', monospace;  // Шарм печатной машинки всегда к месту
  font-size: 18px;
}

Назначьте этот стиль в HTML:

<input type="text" id="myStylishInput">

Управляйте стилями в целом, используя селекторы по типу атрибута для всех input:

/* Селектор по атрибуту */
input[type=text] {
  font-family: 'Verdana', sans-serif;   // Для современного и простого вида
  font-size: 14px;
}

Используйте веб-шрифты

Благодаря возможностям CSS3 можно использовать веб-шрифты, например, с Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

Преобразуем обычные поля ввода:

input {
  font-family: 'Poppins', sans-serif;   // Жалко немного разнообразия в обойму шрифтов
  font-size: 16px;
}

Адаптация и взаимодействие: отзывчивые и стили при наведении

Современный веб не мыслится без адаптивности. Используйте динамические единицы измерения для подстройки под различные размеры экранов:

input {
  font-size: calc(1vmin + 10px);    // Размер шрифта имеет значение
}

Добавьте интерактивности с помощью стилей при наведении:

input:hover {
  background-color: #f0f0f0;
  font-size: 22px;   // Сюрприз! Шрифт увеличивается при наведении курсора
}

Визуализация

Представьте, что мы "переодеваем" наш <input>:

<input style="font-family: 'Comic Sans MS', cursive; font-size: 20px;">

Превращаем одежду нашего <input>:

Было:       [🎽]
Стало:  [👕]

Перед вами <input> в шрифте Comic Sans размером 20px.

Принципы качественного дизайна и доступности

Хороший дизайн требует согласованности. Настраивая стили, не забывайте о доступности:

input {
  font-size: larger; /* Упрощаем чтение для пользователей с ограничениями зрения */
}

Использование атрибутов aria-label помогает программам для чтения с экрана:

<input type="text" aria-label="Имя пользователя">

Найдите баланс между стильными решениями и удобством использования для создания лучшего пользовательского опыта.

Применение стилей в зависимости от контекста

Выбирайте стиль в соответствии с контекстом. Для коротких заметок подойдут меньшие шрифты:

input.shortInfo {
  font-family: 'Tahoma', sans-serif;    // Компактность и содержательность
  font-size: 12px;
}

Для критически важных полей или для отображения ошибок используйте бросающиеся в глаза стили:

input.error {
  font-family: 'Impact', sans-serif;  // Выразительный шрифт для важных сообщений
  font-size: 14px;
  color: #FF0000;
}

Полезные материалы

1. font | CSS-Tricks — Полное руководство по сокращённому свойству font в CSS.
2. <input>: The Input (Form Input) element – HTML: HyperText Markup Language | MDN — Официальная документация MDN по стилизации элементов <input> с помощью CSS.
3. Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions — Smashing Magazine — Глубокие мысли о создании высокоэффективных веб-форм, включая выбор шрифтов и стилей.
4. font-size | Codrops — Обширный справочник по пониманию и использованию font-size в CSS.
5. Typography in ten minutes | Butterick’s Practical Typography — Концентрированное и объемное руководство по типографике, полезное в контексте веб-дизайна.