Красивые css input (поля ввода)
Данная статья посвященна тому, как с помощью одного лишь css и без использования скриптов научится создавать красивые поля ввода, поля выбора (input,select). Для этого нам понадобится не только знания css, но и изображения, которые будут служить фоном полей. К сожалению, на чистом css пока еще невозможно делать такие вещи как закругление углов, поэтому нам остается два выбора: либо прибегать к использованию скриптов, либо пытатся сделать это при помощи css и фоновых изображений. У каждого способа конечно же есть свои недостатки и преймущества. Так как данная статья не о скриптах, мы на них и не будем останавливатся, детально рассмотрим метод с использованием css, для которого мы можем определить пусть не все, но многие преймущества и недостатки.
Недостатки:
— Наверно самым большим недостатком использования фона в качестве оформления поля ввода является его непрактичность. В нынешнее время большинство сайтов в сети интернет используют cms, в которых все поля ввода генерируются без участия человека, веб-мастеру доступен лишь css для установки стилей элементов. Поэтому очень часто бывает просто невозможно использовать дополнительные контейнеры (div), чтоб создать так называемую css обвязку для css input.
Выходов из этой ситуации несколько: можно отказатся от красивых css input и select и для оформления использовать стандартные css свойства, можно указать одинаковую фиксированную ширину и высоту для всех css input и select, тогда можно использовать одно изображение для оформления, а можно использовать css input в связке с кнопкой ввода, что немного развяжет нам руки и позволит сделать красивые, относительно эластичные, поля ввода. Почему я их назвал «относительно эластичные», Вы поймете дальше, при рассмотрении примеров.
Преймущества:
Преймущество у этого способа одно, но самое главное — это позволит нам избежать использования скриптов для оформления.
Создавать красивый css input мы будем с помощью следующего изображения:
А для создания формы поиска мы используем это изображение:
Красивый css input без скриптов
Первым шагом на пути к красивому и оригинальному input у нас будет установка базовых значений css стилей… input{
width:206px;
height:24px;
border:none;
background:url(‘/images/sample_input.
gif’) 0 0 no-repeat;
}
Как видите, мы указали основные css стили для нашего input. Обязательно нужно установить ширину и высоту равными размерам фонового изображения. А также мы обнулили значение свойства border, так как по умолчанию у всех полей ввода установлена граница border. Ну и конечно же указали путь к изображению, которое будет использоватся в качестве фона для css input. Посмотрим, что из этого получилось:
Выглядит неплохо, правда? А попробуйте набрать текст в поле.
Как видите выглядит не очень. Поэтому второе, что мы сделаем — это установим свойства для шрифта и внутренние отступы для текста от границ input.
input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:normal;
color:#A7ADB6;
padding:4px 10px 4px 10px;
border:none;
width:186px;
height:24px;
background:url(‘/images/sample_input.gif’) 0 0 no-repeat;
}
Вот теперь, если ввести текст, то все выглядит хорошо.
Как Вы могли заметить, по сравнению с первым вариантом css для input, изменились значения ширины и высоты. Так как мы применили внутренние отступы (padding) для поля ввода, к ширине и высоте input автоматически прибавились значения указанные в свойстве padding, поэтому мы уменьшили размеры, чтоб сумма их стала такой же как и раньше.
Хочу повторить, что этот способ подходит, если все поля ввода, для которых он применяется, будут одинаковых размеров.
Если же на сайте ширина input будет изменятся динамически, то этот способ не подходит.
Эластичный красивый css input
Если на сайте есть возможность «обвязать» input контейнерами div, то с его красивым оформлением проблем вообще не возникает.
Единственная большая проблема — это вес страницы, так как для каждого поля ввода прийдется использовать до 8 контейнеров div. Почему до 8? — потому, что для самой сложной css обвязки необходимо максимум 8 слоев.
На нашем сайте существует статьи, в которых подробно описываются способы создания css обвязки, поэтому в данной статье мы на этом останавливатся подробно не будем, Вы можете самостоятельно ознакомится с этими статьями: Создание простой css обвязки блока., Создание css обвязки блока на градиентном фоне.. Я лишь покажу, как применить это в случае с полями ввода.
Изображения для эластичного css input
Для того, чтоб сделать эластичное поле ввода, необходимо разрезать представленное выше изображения для фона на 3 части:
- sample_input_02.gif — изображение для заполнения input по всех ширине —
- sample_input_01.gif — левый уголок для поля ввода —
- sample_input_03.gif — правый уголок для поля ввода —
Стили для обвязки css input
.fill-input{
background:url(‘/images/sample_input_02.
gif’) 0 0 repeat-x;
width:100%;
border:none;
height:24px;
padding:4px 0;
}
.left-input{
background:url(‘/images/sample_input_01.gif’) left top no-repeat;
width:50%;
}
.right-input{
background:background:url(‘/images/sample_input_03.gif’) right top no-repeat;
padding:0 14px 0 16px;
}
.
right-input input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:normal;
color:#A7ADB6;
padding:0 0 0 10px;
border:none;
width:95%;
height:16px;
background:none;
}
«left-input»>
«right-input»>
«fill-input»>
<input type=»text» />
Примечание:
В приципе все должно быть понятно, но хотелось бы остановится на некоторых моментах:
.fill-input {width:50%} — это свойство указывает, какой будет ширина нашего input.
Естественно можно использовать как точные значения, так и значения в других доступных измерениях.
.right-input input {width:95%} — так как для отступа слева от обвязки используется padding слева, то ширину равную 100% использовать нельзя, поэтому для отступа справа мы установили ширину равную 95%.
Приведенный выше способ является кроссбразуерным и очень удобным, но, как Вы могли уже убедится, требует несколько дополнительных контейнеров, а это не всегда возможно.
Эластичная форма поиска
Последний способ, из представленных мной, заключается в использовании двух элементов формы: поля ввода и графической кнопки.
В качестве примера будет использоватся следующее изображение, которое будет применяться для оформления будущей формы:
Разрезаем изображение на составные части
В первую очередь нам необходимо разрезать исходное изображение на 2 составные части. При чем левую часть необходимо удленить, полученная ширина будет максимальной шириной поля ввода. В итоге мы получим следующие изображения:
Хочу заметить, что удленения изображения не приведет к сильному росту размера, так как используется формат .gif, у которого есть свойство сжимать размер, если в изображении есть повторяющиеся части.
css стили для формы
.
input-text{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:normal;
color:#A7ADB6;
padding:4px 0 0 10px;
border:none;
width:210px;
height:20px;
vertical-align:top;
background:url(‘/images/sample_form_01.gif’) 0 0 no-repeat;
}
.input-button{
background:url(‘/images/sample_form_02.gif’) 0 0 no-repeat;
width:130px;
height:24px;
border:0;
vertical-align:middle;
}
<input type=»text» /><input type=»button» />
Следует отметить, что для css input нужно использовать vertical-align:top, а для кнопки vertical-align:middle — это позволит выровнять по вертикали эти два элемента.
В итоге мы имеем форму, в которой можно изменять ширину поля ввода.
Выводы:
В данной статье мы рассмотрели 3 способа оформления для css input. У каждого из способов есть свои плюсы и минусы, но для создания красивых форм без использования криптов эти способы наиболее оптимальные.
Как сделать, чтобы текстовое поле при получении фокуса меняло цвет рамки?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
8. 0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Рамка вокруг текстового поля создается с помощью стилевого свойства border, которое добавляется к селектору INPUT. Фокусом же называется активность элемента, в данном случае, когда курсор находится внутри текстового поля и пользователь может вводить символы с клавиатуры.
За работу фокуса отвечает псевдокласс :focus, его необходимо добавить к селектору INPUT или TEXTAREA, как показано в примере 1.
Пример 1. Использование псевдокласса :focus
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Изменение цвета рамки</title>
<style>
INPUT.text {
border: 1px solid #ccc; /* Исходная рамка вокруг поля */
width: 80%; /* Ширина поля */
}
INPUT.text:focus {
border: 1px solid #39c; /* Рамка при получении фокуса */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" size="30" /></p>
<p><input type="submit" value="Отправить" /></p>
</form>
</body>
</html>Результат примера показан на рис.
1.
Рис. 1. Изменение стиля поля при получении фокуса
В данном примере вводится класс text, чтобы стиль сработал только для текстового поля, а не для кнопки.
Поскольку псевдокласс :focus не поддерживается браузером Internet Explorer до версии 8.0, для него можно воспользоваться скриптами. С этой целью поможет событие onfocus, которое срабатывает при получении фокуса и onblur, при его потере. Предварительно создаем два класса, они задают вид оформления обычного текстового поля и его же при получении фокуса. Далее к тегу <input> добавляем onfocus=»this.className=’focus'» и onblur=»this.className=’text'». Здесь focus и text это названия классов (пример 2).
Пример 2. Использование скриптов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изменение цвета рамки</title>
<style>
INPUT.text {
border: 1px solid #ccc; /* Исходная рамка вокруг поля */
width: 80%; /* Ширина поля */
}
.
focus {
border: 1px solid #39c; /* Рамка при получении фокуса */
width: 80%; /* Ширина поля */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" size="30"
onfocus="this.className='focus'" onblur="this.className='text'" /></p>
<p><input type="submit" value="Отправить" /></p>
</form>
</body>
</html>
focus {
border: 1px solid #39c; /* Рамка при получении фокуса */
width: 80%; /* Ширина поля */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" size="30"
onfocus="this.className='focus'" onblur="this.className='text'" /></p>
<p><input type="submit" value="Отправить" /></p>
</form>
</body>
</html>Псевдокласс :focus | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Псевдокласс :focus определяет стиль для элемента получающего фокус.
Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Синтаксис
элемент:focus { … }
Значения
Нет.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>focus</title>
<style>
#enter .label {
width: 80px; /* Ширина блока с текстом */
float: left; /* Расположение в одну строку с полем */
text-align: right; /* Выравнивание по правому краю */
}
#enter .form-text {
width: 240px; /* Ширина поля */
margin-left: 10px; /* Расстояние между полем и текстом */
border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
padding: 2px; /* Поля вокруг текста */
}
#enter .form-item {
margin-bottom: 5px; /* Отступ снизу */
}
#enter .form-text:focus {
background: #ffe; /* Цвет фона */
border: 1px solid #29B0D9; /* Параметры рамки */
}
#enter p {
margin-left: 90px; /* Сдвиг вправо */
}
</style>
</head>
<body>
<form action="login. php" method="post">
<div>
<span>Логин:</span>
<span><input type="text" name="login" value=""></span>
</div>
<div>
<span>Пароль:</span>
<span><input type="password" name="pass"></span>
</div>
<p><input type="submit" value="Войти" /></p>
</form>
</body>
</html>
php" method="post">
<div>
<span>Логин:</span>
<span><input type="text" name="login" value=""></span>
</div>
<div>
<span>Пароль:</span>
<span><input type="password" name="pass"></span>
</div>
<p><input type="submit" value="Войти" /></p>
</form>
</body>
</html>Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
Рис. 1. Результат использования псевдокласса :focus
Браузеры
Chrome не добавляет стиль для селектора a, чтобы заставить его понимать правило a:focus, добавьте к тегу <a> атрибут tabindex.
<a href=»http://htmlbook.ru/1.html» tabindex=»1″>Ссылка</a>
Красивый стиль оформления для input
В этой статье вы узнаете как изменить оформление тега, используя плагин jQuery Label Better.
С помощью этого расширения можно улучшить оформление элементов формы тега. Среди особенностей плагина можно отметить простоту использования – нужно только прописать атрибут placeholder, а label будет создан, при необходимости, автоматически.
ДемоСкачать
В первую очередь необходимо подключить jQuery. Это нужно сделать после тега head:
|
| <script src=»http://code.jquery.com/jquery-1.10.2.min.js» type=»text/javascript»></script> |
Для работы необходимо подключить jquery.label_better.js.
После необходимо создать скрипт, вызывающий функцию, и передать ей имя класса .label_better и тип используемой анимации:
|
| <script> $(document).ready( function() { $(«. easing: «bounce» //тип анимации }); }); </script> |
label_better»).label_better({Кроме этого параметра, допустимо указывать и другие:
|
| position: «top», // Позиция animationTime: 500, // Время выполнения анимации easing: «ease-in-out», // Тип анимации: CSS виды, а так же «linear», «ease», «bounce». offset: 20, // Расстояние hidePlaceholderOnFocus: true // по умолчанию при фокусе плэйсхолдер будет исчезать |
Задавать значения параметров, передаваемых в плагин, можно непосредственно в тексте HTML-файла. В качестве примера можно взять атрибут data-position. Задавая его значение, можно управлять позицией смещения.
|
| <input type=»text» data-position=»right» placeholder=»Username»> |
Текст placeholder-а может меняться в зависимости от текущего состояния.
За изменение текста отвечает атрибут data-new-placeholder. Следующий код меняет текст «Ваше имя» на «Введите имя» после получения фокуса.
|
| <input type=»text» placeholder=»Ваше имя» value=»» data-new-placeholder=»Введите имя» /> |
Обратите внимание, что плагин работает не во всех браузерах. В Internet Explorer плагин не функционирует, а в Opera могут возникнуть проблемы с корректным отображением. Для работы с этими браузерами понадобится искать другой вариант оформления input.
Возможно, Вам будет интересно ↓↓↓
22 лучших формы входа и регистрации на сайте в HTML&CSS!
В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript.
Смотрите одну из лучших и современных форм входа с эффектами JQuery.
На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).
Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.
Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.
Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!
1 → Темная форма входа
Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.
2 → Светлая форма входа
Светлая форма входа с прозрачной рамочкой и четкой структурой.
3 → Эффектная форма с эффектом появления
Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.
4 → Простая форма с эффектом появления
Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.
5 → Красивая форма с логотипом Apple
Продуманная форма на сайт с интересным дизайном и логотипом apple.
6 → Маленькая форма в розовом стиле
Маленькая и простая, в розовом стиле, и интересным дизайном.
7 → Светлая форма
Светлая, в выдержанном стиле и дизайне, ничего лишнего.
8 → Супер форма входа и восстановления пароля
Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.
9 → Приятная дизайнерская форма с эффектом
Приятная на вид, красивый эффект появления иконок при активации поля ввода.
10 → Форма серого цвета
Серый оттенок, в виде друг на друга наложенных листочков.
11 → Крупная форма с дополнительным элементом
Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).
12 → Дизайн в виде блокнота
Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.
13 → Красочная, прозрачная форма
Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.
14 → Apple Iphone форма
Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!
15 → Чёткая форма с заголовком
Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.
16 → Тёмная форма
Тёмная форма с красивой и заметной кнопкой отправки данных.
17 → Черная форма
Черная форма входа с белыми полями – хорошее сочетание цветов.
18 → Горизонтальная форма входа и регистрации
Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.
19 → Темная форма с дополнительными элементами
Темная форма с кнопками входа через социальные сети и красивыми полями.
20 → Форма входа на сайт + регистрация
Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.
21 → Белая форма с красным заголовком
Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.
22 → Форма входа, регистрации и восстановление пароля
Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.
Заключение
Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.
При использовании конкретной формы, Вам остается лишь её (возможно) немного корректировать, подогнать под свой сайт, и все будет супер! Если Вы собираетесь использовать какую-то из форм – дайте мне знать об этом в комментарии!
Данный урок подготовлен для вас командой сайта /
Подготовил: Владислав Бондаренко
Фокусы со стилями для фокуса — CSS-LIVE
Перевод статьи Focusing on Focus Styles с сайта css-tricks.com для CSS-live.ru, автор — Эрик Бейли
Не у каждого пользователя интернета есть мышка под рукой. При чтении со смартфона это очевидно! К тому же есть и другие способы ввода, которыми люди решают свои задачи. И для них нужны стили для фокуса.
Люди
Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения.
Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.
Люди также живут не в вакууме. Иногда нашим привычным действиям противостоят окружающая среда и внешние факторы. Вы когда-либо застревали в доме своих родителей на время праздников, когда вам приходилось пользоваться их древним, но ещё рабочим настольным компьютером? Ну вот.
Ввод
Как мышь, так и сенсорный ввод служат индикатором для взаимодействия. Для сенсора это ясно: палец — связующее звено между вашим разумом и предметом на экране, который ему нужно активировать. В случае мыши, курсор служит посредником для вашего пальца.
Однако, есть ещё множество других форм ввода. Клавиатуры есть повсюду и могут практически полностью заменить мышь или сенсорный ввод, если знать нужные клавиши для нажатия в правильном порядке. Иногда это проще и быстрее мыши!
Вспомните, когда вы в последний раз использовали функциональность «Вырезать», «Копировать», «Вставить» и «Сохранить».
Возможно, во время работы с таблицей, например, с Excel? Вы переключались между мышкой и клавиатурой, чтобы работать эффективнее? Вероятно, вы делали это «на автомате», но это яркий пример переключения ввода на лету ради быстрого результата. Да чёрт возьми, может во время этого нудного занятия у вас ещё нашлось время, чтобы лайкнуть чью-либо запись в Facebook на смартфоне.
Если обстоятельства мешают вам вводить информацию руками, то есть и другие варианты: манипуляторы, которые крепятся к голове или управляются ртом, кнопки-переключатели, устройства, управляемые вдуванием и вытягиванием воздуха из трубки, технологии распознавания голоса и отслеживания взгляда — всё это может служить для ввода в цифровой системе. Эти устройства идентифицируют область содержимого и активируют её. Напоминает хождение по ячейкам таблицы с помощью табуляции, когда ячейки подсвечиваются и готовы к редактированию. Это как по нажатию клавиши табуляции подсвечивается следующая ячейка в таблице, указывая на то, что в нее переместились для редактирования.
На этом видео, редактор видеороликов и консультант по доступности Кристофер Хилс демонстрирует возможности «Switch Control», программного обеспечения, помогающего людям с нарушением двигательной функции использовать аппаратные переключатели для работы со своими вычислительными устройствами.
Возможно это технология когда-нибудь пригодится и вам. К примеру, вы сломали обе руки, неудачно покатавшись на горном велосипеде, и хотите заказать что-нибудь вкусненькое с доставкой себе в утешение, пока вы поправляетесь. Или, скажем, едете за рулём и хотите безопасно написать эсэмэску своей семье. Или просто состаритесь. Навскидку полно и других примеров, просто люди обычно гонят от себя подобные мысли.
Если это интерактивно, этому нужен стиль фокуса
Не всегда известно, кто посещает наши сайты или приложения, причину их посещения, мотивы, время посещения, в каких условиях они находятся, какие эмоции испытывают, или какой ввод они могут использовать.
Аналитика может помочь отчасти, но не даст полную картину. Было бы глупо ставить телегу впереди лошади и оптимизировать всю логику интерфейса лишь по этой обрывочной информации.
Также важно знать, что не все пользователи вспомогательных технологий хотят это афишировать. Да они и не обязаны. Продвинутые пользователи, использующие сочетания клавиш, специализированное программное обеспечение и браузерные расширения могут показаться пользователями вспомогательных технологий, но вполне могут и не быть инвалидами. Опять же, люди сложны!
Главное, дать эту возможность всем независимо ни от чего.
Идентификация и активация
:focus
Как с помощью этих альтернативных форм ввода можно определить, что это подходит для активации? К счастью, в CSS это решено — мы используем селекторы :focus и :active.
Они довольно просты. Хотите обвести ссылку оранжевым, когда пользователь переведет на неё фокус? Вот как это описать:
a:focus {
outline: 3px solid orange;
}
Этот контур появится, когда кто-то переместится к ссылке, будь то клик, касание сенсора, переход клавишей Tab с клавиатуры или ввод с помощью кнопки-переключателя, чтобы выделить её.
Есть популярное заблуждение, будто к стилям фокуса можно применить только свойство outline Отмечу, что :focus — это такой же селектор, как и любой другой, а значит, он принимает любые CSS-свойства. Я люблю играть с фоновым цветом, подчёркиванием и другими приемами, не влияющими на текущий размер компонента, чтобы не сдвигать раскладку страницы при активации селектора.
Затем, скажем, нужно удалить подчёркивание активированной ссылки, чтобы сообщить о смене состояния. Помните: ссылки используют подчёркивание!
a:active {
text-decoration: none;
}
Важно, чтобы все изменения состояния — из обычного в состояние под фокусом, а оттуда в активное — различались. Это значит, что каждый переход должен быть уникальным по сравнению с другими состояниями компонента, указывая пользователю на изменение.
Смена состояния также не должна ограничиваться лишь сменой цвета — не забывайте о людях с дальтонизмом и/или плохим зрением.
Вот как изменение только лишь состояния цвета может выглядеть для человека с дейтеранопией, или неспособностью различать красный и зеленый цвета:
Чтобы лучше проиллюстрировать проблему, я намеренно удалил подчёркивание и браузерную нативную обводку фокуса из ссылки на видео. Если перебирать всё интерактивное на странице клавишей Tab, эту ссылку можно сразу и не заметить. Если человек не различает цвета, он не увидит и изменения ее состояния при наведении, а если у него к тому же катаракта — то и подавно.
:focus-within
:focus-within — связанный с фокусом селектор псевдокласса, название которого, «фокус внутри», звучит очень по-дзенски — может применять стили к родительскому элементу, когда один из его дочерних элементов получает фокус.
Типичный случай, когда этот селектор может быть нужен — если надо применить стили ко всей форме, когда один из элементов input в ней получает фокус.
В примере ниже я плавно увеличиваю размер всей формы, если только пользователь не пожелал ограничить анимации до минимума.
See the Pen :focus-within Demo by Eric Bailey (@ericwbailey) on CodePen.
Этот селектор по-прежнему относительно новый, поэтому я уверен, что со временем найдется гораздо больше интересных вариантов его использования.
Взгляды
У людей также есть мнения. К сожалению, порой эти мнения не подкреплены знаниями. Среди людей, не занимающихся доступностью, господствует мнение, что стили фокуса «безобразны», и многие дизайнеры и разработчики удаляют их ради внешнего лоска. А порой они даже не подозревают, что распространяют чужое мнение — многие CSS-сбросы включают глобальное удаление стилей фокуса, и включаются в проект в качестве фундаментальной зависимости, как что-то само собой разумеющееся.
Это решение исключает людей. Сайты и приложения — это не предметы роскоши, которые в отрыве от контекста должны красоваться у вас в портфолио, и не статичные скриншоты в складной корпоративной презентации. Они нужны, чтобы их читали и пользовались ими, и есть правила, которые помогут максимально возможному количеству людей делать именно это.
:focus-visible
Правда жизни в том, что порой люди настаивают на удалении стилей фокуса, и у них бывает достаточно влияния, чтобы навязать это своему окружению. Это идет вразрез с правилами, что на действительно доступных сайтах механизмы фокуса должны быть видимыми. Эту проблему решает псевдоселектор :focus-visible.
Псевдокласс :focus-visible срабатывает, когда браузер определил, что произошло событие фокуса, и специальные встроенные эвристики подсказали ему, что имел место ввод без указателя. Или, если не такими мудрёными словами — он показывает стили для фокуса, если элемент активирован не курсором мыши и не пальцем на сенсоре.
На видеозаписи этого примера с Codepen видно, как в зависимости от того, каким способом пользователь выбирает ссылку, к ней применяются разные стили. При наведении и клике по ссылке мышью удаляется её подчёркивание, а сама она немного сдвигается вниз. При переходе к ней клавишей Tab с клавиатуры :focus-visible вместо этого применяет к ссылке яркий цвет фона.
Недавно Chromium заявил о своём намерении реализовать :focus-visible. Несмотря на сегодняшнюю скудную поддержку браузерами, есть полифил. Вместе с :focus-within они находятся в редакторском черновике селекторов четвёртого уровня, и со временем их начнут поддерживать все основные браузеры.
Вы можете знать :focus-visible под другим названием :-moz-focusring.
Так, в виде псевдоселектора с префиксом, эту же идею реализовала Mozilla, еще за семь лет до предложения :focus-visible. В отличие от других браузерных префиксов CSS, нам не придётся беспокоиться о поддержке авторасстановки префиксов! Firefox признает как объявление :focus-visible, так и :moz-focusring, гарантируя, что между двумя браузерами будет паритет для наших названий селекторов.
Шаг вперёд, шаг назад
С браузерной поддержкой не всё гладко — одними лишь Chrome и Firefox веб не ограничивается. Пусть полифил отлично справляется там, где нет нативной поддержки, мы всё равно загружаем лишние данные, получаем дополнительную сложность в поддержке и более хрупкий код.
Также стоит отметить, что теперь нет такого четкого противопоставления двух классов устройств по типу ввода, как было раньше. Флагманский компьютер Surface от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и сенсорную функциональность из коробки.
Исследование использования скринридеров WebAIM в 2017 г. показало, что мобильные устройства могут дополняться клавиатурным вводом чаще чем вы думаете. Эвристика — это хорошо, но как и аналитика, она не даёт полной картины.
Стоит учесть еще и то, что пользователям с мышкой тоже бывают нужны стили для фокуса. Эти стили — чёткий и однозначный признак интерактивности, что даёт большое преимущество людям с плохим зрением, когнитивными проблемами, и людям, которые не очень дружат с техникой. Особо продвинутые пользователи, которые не понаслышке знают, что скринридеры и горячие клавиши — это как Vim по сравнению с графическими оболочками, захотят, чтобы состояние фокуса было очевидным, ведь они порхают по экрану, используя клавиатуру.
Залог надёжного и устойчивого веба — это крепкая базовая функциональность, работающая в любом браузере. У ванильного селектора :focus настолько широкая поддержка, что можно быть уверенным, что даже экзотические браузеры его поймут.
В мире полно вещей, которые одним кажутся безобразными, а другим красивыми.
Лично для меня стили фокуса не помеха. Как дизайнеру, мне кажется, что это необходимая часть создания зрелой системы дизайна. Как для разработчика, описывать состояние для меня — привычная работа. Как человеку, мне нравится сохранять интернет открытым и доступным, каким он и должен быть.
Если есть желание продвинуться в этой теме ещё дальше, дизайнер интерфейсов Кэйтлин Джийер отлично написала про индикаторы фокуса.
P.S. Это тоже может быть интересно:
Стилизация input type radio на чистом css3
Сегодня создадим стилизацию для поля формы input type radio. Наверное многие знают, что создать стили для радио кнопок не так просто. Так вот сегодня мы с вами создадим красивые радио кнопки при помощи css3 и никаких скриптов и тому подобных громоздких примудростей. В интернете конечно можно найти много интересных методов стилизации радио-кнопок, но они очень громоздкие и не всем понятные. Но я вам помогу решить — эту задачу быстро и без никаких javascript и jquery
Даже в самом CSS3 нет возможности на прямую редактировать стили для поля формы input type radio.
Но для создания стиля для поля radio можно обойти все возможные простые подходы.
Для примера давайте рассмотрим простой тип поля переключателя
Код HTML
<form action="" method="get"> <input name="Кнопка 1" type="radio" value="" checked> Кнопка 1 <input name="Кнопка 2" type="radio" value=""> Кнопка 2 <input name="Кнопка 3" type="radio" value=""> Кнопка 3 <input name="Кнопка 4" type="radio" value=""> Кнопка 4 </form>
Здесь мы можем просмотреть простую реализацию формы. А сейчас приступим к реализации вот такой вот стильной радио кнопки.
Пример как это работает
А сейчас просмотри как же стилизовать радио кнопки, input type radio?
HTML код
<ul>
<li>
<input type="radio" name="g">
<label for="choice-a">
<span><span></span></span>
Choice A
</label>
</li>
<li>
<input type="radio" name="g">
<label for="choice-b">
<span><span></span></span>
Choice B
</label>
</li>
<li>
<input type="radio" name="g">
<label for="choice-c">
<span><span></span></span>
Choice C
</label>
</li>
<li>
<input type="radio" name="g">
<label for="choice-d">
<span><span></span></span>
Choice D
</label>
</li>
</ul>И вот собственно сам css для стилизации
CSS код
ul.
radio-group li {
position: relative;
list-style: none;
padding: 10px;
}
input[type="radio"] {
opacity: 0;
position: absolute;
}
/* Соответствует прямому потомку лейбла, которому предшествует a
радио-кнопка */
input[type="radio"] + label > span {
position: relative;
border-radius: 12px;
width: 14px;
height: 14px;
background-color: #FFFFFF;
border: 1px solid #bcbcbc;
margin: 0 1em 0 0;
display: inline-block;
vertical-align: middle;
}
/* Соответствует промежутку, содержавшему прямым потомком
из лейбла, которому предшествует проверенная радио-кнопка */
input[type="radio"]:checked + label > span span {
display: inline-block;
width: 6px;
height: 6px;
position: absolute;
left: 4px;
top: 4px;
border-radius: 4px;
border: none;
background: #e00e17;
}Еще один пример
Очень красивые получились радио-кнопки и просто не привычные конечно.
Но надеюсь вам понравилось. Чтож пример надеюсь вам понравился приступаем к просмотру кода который необходимо вставить на страницы сайта.
Код HTML
<div> <form> <input type="radio" name="radio" checked=""> <label for="radio1">Кнопка 1</label> </form> </div> <div> <form> <input type="radio" name="radio"> <label for="radio2">Кнопка 2</label> </form></div> <div> <form> <input type="radio" name="radio"> <label for="radio3">Кнопка 3</label> </form></div> <div> <form> <input type="radio" name="radio"> <label for="radio4">Кнопка 4</label> </form> </div>
Как вы уже поняли из исходного кода, что здесь мы помещаем нашу форму в блок, и придаем для нее css3 стили вот таким образом. Смотрим код ниже
Код CSS
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 200px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input. radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: . 9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .
9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}Вот и все пользуйтесь! Конечно для подгона под свои нужды сам css можно изменять подстраивать эксперементировать.
Вот в таком не большом посте, я вам объяснил принцып реализации стилей для радио-кнопок самим чистым методом css3 стилей.
33 модных коллекций дизайна полей ввода CSS 2021
Поля ввода — это наиболее часто используемый элемент на любом веб-сайте или в приложении. Когда нам нужно что-то найти, мы используем поле ввода для поиска. Чтобы сузить огромный список данных, мы используем поля ввода фильтра. Некоторые поля ввода представляют собой просто обычные текстовые поля, но некоторые поля ввода требуют дополнительного уровня безопасности для защиты входных данных. Независимо от того, какое поле ввода вы ищете, в этом списке есть дизайн поля ввода CSS для всех ваших нужд.
Характеристики поля ввода различаются в зависимости от места использования. Например, в поле поиска вы можете предложить поисковый запрос, чтобы сэкономить время людей. При разработке такого универсального элемента он должен обладать гибкостью, чтобы принять любую функцию, которую вы добавите к нему. Поля ввода CSS в этой коллекции разработаны с простой структурой кода для упрощения настройки. Эти поля ввода CSS используют последние тенденции дизайна, чтобы сделать их привлекательными и эффективными для современных пользователей. Без лишних слов, давайте перейдем к списку дизайнов полей ввода CSS.
Форма входа 20
Если у вас есть ограничения по пространству, использование однострочных текстовых полей является эффективным решением. Форма 20 входа в систему является одним из таких дизайнов текстового поля ввода с одной строкой. Из самого названия вы можете сделать вывод, что этот дизайн в первую очередь предназначен для форм входа в систему. Но вы можете использовать этот дизайн и для других областей ввода текста.
Эффекты плавной анимации помогут вам эффективно управлять пространством. Еще одно преимущество этих текстовых полей ввода — это поддержка проверки полей формы.Для кнопки призыва к действию используется градиентная цветовая схема. Поля ввода в этой форме созданы с использованием последней версии скрипта CSS3, поэтому у вас есть множество вариантов настройки в этом дизайне.
Информация / Скачать демо
Форма входа 18
Поскольку количество пользователей смартфонов сильно выросло, эффекты анимации должны работать лучше как на мобильных, так и на настольных устройствах. Создатель этой формы использовал мигающую цветную анимацию при выборе поля. Поскольку большая часть функции выбора на мобильных устройствах является касанием, она лучше работает и на мобильных устройствах.Эффект цветного мигания выделен жирным шрифтом, чтобы пользователь четко знал, в какое поле он вводит свои данные. Помимо цветной мигающей анимации вы также получаете эффект плавного перехода тегов.
Еще одна удобная для пользователя функция в этом дизайне ввода заключается в том, что сообщение об ошибке четко отображается с указанием типа данных, которые следует указать в этом поле. Сохраняя это как основу, вы можете создать свое собственное поле ввода.
Информация / Скачать демо
Форма регистрации Colorlib v4
В этой регистрационной форме вы получаете все типы дизайнов полей ввода CSS.Прямо от раскрывающихся списков до простого поля ввода текста, все включено в эту форму. Поскольку это регистрация, вы также получаете поле ввода CSS календаря и переключатели. Создатель использовал последнюю версию фреймворка HTML5, CSS3 и Bootstrap 4 для создания этой формы. Следовательно, вы можете легко редактировать и использовать этот дизайн на своем веб-сайте и в дизайне форм. Данный дизайн ввода календаря прост и понятен. Если вы ищете более интуитивно понятный и креативный дизайн календаря, взгляните на нашу коллекцию дизайнов Bootstrap Datepicker.
Информация / Скачать демо
Форма регистрации Colorlib v6
В этом дизайне регистрационной формы мы получаем только базовый дизайн поля ввода текста.
Но что делает эту форму уникальной, так это эффекты анимации, используемые для поля ввода CSS. В первую очередь эта форма предназначена для подачи заявления на вакансию, поэтому создатель использовал простой и профессиональный дизайн. Небольшой плавающий эффект используется для отображения выбранного поля ввода. Эффекты теней также используются с умом, чтобы придать реалистичность эффекту анимации.Если вы создаете профессиональный веб-сайт, такие конструкции полей ввода CSS помогут вам создать интерактивный дизайн, не нарушая общий вид вашего веб-сайта или формы.
Информация / Скачать демо
Форма входа 13
Форма входа 13 — это полнофункциональная профессиональная регистрационная форма. Поле ввода поддерживает как простые поля ввода текста, так и поля ввода конфиденциальной информации. Эффекты быстрой анимации используются в строках поля формы для обозначения выбранного поля ввода.На протяжении всего дизайна дизайнер придерживался розовой цветовой схемы, но вы можете настроить ее в соответствии со своей цветовой схемой.
Разработчик использовал новейшие скрипты HTML5 и CSS3, поэтому он поддерживает все современные цвета и эффекты анимации. Вы даже можете использовать эту форму как таковую на своем веб-сайте, поскольку все функции работают с интерфейсом, все, что вам нужно сделать, это позаботиться об интеграции с сервером.
Информация / Скачать демо
Форма входа 11
Форма входа 11 — это версия мобильного приложения формы входа 13, упомянутой выше.Для тегов полей формы используются аккуратные значки и текст, чтобы элегантно указать, какие детали должны быть указаны в поле ввода. В таком виде дизайнер использовал плоский стиль дизайна. Все поля формы идеально вписываются в отведенное пространство. Данные эффекты анимации просты и аккуратны, не занимая много места на экране и времени для загрузки. Как и все другие формы входа, поле пароля защищено, поэтому пользователь не может видеть вводимые данные.
Информация / Скачать демо
Форма входа 7
В предыдущем дизайне поля ввода для паролей символы скрыты.
Некоторые пользователи предпочитают видеть символы пароля перед подтверждением, в этом случае вы можете использовать дизайн поля ввода с переключателем, как показано в этой форме. Эта форма позволяет пользователям видеть персонажей, если они хотят. По соображениям безопасности, если вы ограничиваете количество попыток входа в систему, возможность просмотра вводимых символов поможет пользователю дважды проверить свои данные. С точки зрения дизайна эта форма повторяет аккуратный дизайн с закругленными краями. Чтобы сделать форму интерактивной, используются тонкие эффекты анимации и наведения.
Информация / Скачать демо
Контактная форма v18
В контактной форме v18, наряду с обычными полями ввода текста, создатель также предоставил вариант поля ввода раскрывающегося списка. Использование раскрывающегося меню поможет пользователю сэкономить время. Выпадающие варианты ввода лучше подходят для заранее определенных постоянных параметров. Например, на медицинских веб-сайтах вы можете дать возможность выбрать отдел, с которым пользователь хочет связаться.
Предоставление таких вариантов поможет вам организовать запрос и ответить на них вовремя.Здесь создатель предоставил вам полную контактную форму в полностью рабочем состоянии из внешнего интерфейса. Все, что вам нужно сделать, это позаботиться об интеграции с серверной частью. Поскольку этот шаблон разработан с использованием новейших сред веб-разработки, его можно легко интегрировать в любые современные инструменты или приложения.
Информация / Скачать демо
Контактная форма v17
Contact Form v17 — это форма обратной связи с разумным дизайном. Вы можете использовать эту контактную форму на любом профессиональном бизнес-сайте.В этом дизайне с разделенным экраном у вас достаточно места для добавления элемента формы и контактных данных. Важные поля ввода отмечены звездочками. Ярлыки полей формы разумно используются, чтобы показать, какие детали должны быть указаны в этом конкретном поле ввода. Помимо обычных полей ввода текста, вы также получаете небольшие анимационные эффекты, которые улучшают взаимодействие с пользователем.
В загружаемом файле вы получаете все необходимые сценарии кода и ресурсы, организованные в соответствующие папки. Следовательно, работа с этим шаблоном будет легкой работой для разработчиков.
Информация / Скачать демо
Контактная форма v16
Contact Form v16 — это пример дизайна всплывающего поля ввода. В шаблоне одностраничного веб-сайта или шаблоне целевой страницы такие элементы помогут вам сэкономить больше места для важных веб-элементов. Все поля ввода в контактной форме поддерживают проверку поля формы. Когда пользователь упускает какую-либо деталь или совершает ошибку, она выделяется ярко-красными текстовыми полями. Аккуратные векторные иконки используются для обозначения типа информации, представленной в этом поле ввода.Если вы ищете всплывающую форму или поле ввода, этот шаблон — лучший пример. Взяв это за основу, вы можете создать свой собственный дизайн или форму.
Информация / Скачать демо
Контактная форма v4
Contact Form v4 — это красочный современный дизайн контактной формы для веб-сайтов и мобильных приложений.
На протяжении всего шаблона дизайнер использовал модную цветовую схему градиента. Поскольку он разработан с использованием фреймворка CSS3, все цвета выглядят естественно. Кроме того, вы также можете добавить в этот дизайн формы любую современную цветовую схему.Еще одна полезная функция в этом шаблоне формы — это раскрывающиеся поля ввода. Для выделения с раскрывающимся списком дизайнер также использовал цветовую схему градиента. Кнопка призыва к действию внизу имеет привлекательный эффект наведения курсора на изменение цвета.
Информация / Скачать демо
Контактная форма v10
Форма обратной связи
v10 имеет анимированные поля ввода. Вместо того, чтобы давать простое статическое поле ввода, вы можете использовать небольшую анимацию, чтобы оживить свой дизайн.В этой форме создатель использовал простой, но привлекательный эффект анимации. Выбранное поле ввода немного расширяется при его выборе, чтобы пользователь знал, какое поле он выбрал. В дизайне этой формы используется очень минимальный подход, поэтому вы можете легко использовать эту форму на любом веб-сайте.
Шрифт по умолчанию, используемый в этой форме, крупнее и жирнее, что обеспечивает лучшую читаемость. Настроить эту форму будет несложно, потому что разработчик следует отраслевому стандарту кода, которому следуют профессиональные разработчики.
Информация / Скачать демо
Сообщить мне
Уведомить меня — это анимированный дизайн поля ввода CSS. Текстовое поле расширяется после нажатия кнопки уведомления и дает вам достаточно места для ввода текста. Поскольку это поле ввода предназначено для получения адресов электронной почты, текстовое поле имеет соответствующий размер. В этом поле ввода также дается проверка текстового поля. Отправка активируется только тогда, когда пользователь отправляет правильное электронное письмо со знаком «At-sign» и TLD. Хотя поле ввода обрабатывает несколько параметров, весь дизайн создается с помощью сценария CSS.Следовательно, разработчики могут легко использовать этот код в своих проектах.
Информация / Скачать демо
Поле ввода с подчеркиванием
Этот дизайн поля ввода будет идеальным вариантом для полей ввода пароля и кода подтверждения.
Как следует из названия, это поле ввода имеет подчеркивание под каждым символом. Таким образом, пользователь может четко видеть вводимый текст и легко менять символы, если они допустили ошибку. Структура кода этой концепции проста, как и ее дизайн.В основном для создания этого дизайна используется скрипт CSS, который дает вам более чем достаточно места для добавления ваших пользовательских элементов и эффектов. В целом, этот фрагмент кода поля ввода легко редактировать и легко помещается в любой части веб-сайтов / приложений.
Информация / Скачать демо
Поле ввода электронной почты
Поле ввода электронной почты
— это еще один дизайн поля ввода для адресов электронной почты. Если вам не нужен анимированный дизайн поля ввода CSS, подобный упомянутой выше концепции «Уведомить меня», вы можете проверить этот дизайн.Создатель сохранил аккуратный и простой дизайн поля ввода. Для поля ввода и кнопки призыва к действию используются очень тонкие анимации, что делает этот дизайн легким и простым в использовании.
Эффекты тени используются разумно, чтобы отличить кнопку призыва к действию от текстового поля. Эта концепция вдохновит тех, кто хочет иметь профессиональный, но стильный дизайн блока ввода.
Информация / Скачать демо
Окно ввода CSS, совместимое со стандартом Nice
Это еще один пример дизайна анимированного поля ввода CSS.Преимущество этого дизайна в том, что он сделан исключительно с использованием скриптов CSS3 и HTML5. Следовательно, вы можете легко использовать этот код даже в своем существующем веб-сайте или дизайне формы. Эффекты увеличения и уменьшения масштаба гладкие и плавные, поэтому пользователю не нужно слишком долго ждать, чтобы ввести данные в поле ввода. Шрифт, используемый в этом дизайне, больше и легче читается. Но если вы планируете использовать любые другие модные шрифты, этот дизайн легко справится с этим.
Информация / Скачать демо
Поле ввода CSS для Google Material Design
Как следует из названия, в этом дизайне используется материальный дизайн Google.
Метка поля формы плавно перемещается в верхнюю часть поля ввода, чтобы указать, какую информацию пользователь должен ввести в это поле. Благодаря эффектам быстрой анимации и эффектам плавного перехода это поле ввода CSS легко работает как на настольных, так и на мобильных устройствах. Благодаря этому простому дизайну вы можете легко использовать этот дизайн поля ввода в любой части веб-сайта и формы. Весь сценарий кода предоставляется вам в редакторе CodePen, поэтому вы можете редактировать и визуализировать результаты в самом редакторе.
Информация / Скачать демо
Входное поле Градиентная граница Focus Fun
В этом дизайне поля ввода CSS создатель использовал анимацию границы. Эффект свечения аккуратно выделяет выбранное поле ввода. Кроме того, эффект анимации возникает только на границе поля ввода, поэтому пользователи могут четко видеть контент, который они добавляют в поле ввода. Создатель в основном использовал скрипт CSS3 для создания этого дизайна поля ввода CSS.
Следовательно, вы можете легко использовать код даже на своем существующем веб-сайте или в форме.Если вас интересует анимация границ, взгляните на нашу коллекцию анимации границ CSS.
Информация / Скачать демо
Текст для ввода заполнителя
Placeholder Typing Text — это обычное поле ввода с классным анимационным эффектом. Как следует из названия, это поле ввода имеет эффект ввода текста. Разработчик сделал это поле ввода как поле поиска, но вы можете использовать этот эффект и для других типов полей ввода. Благодаря закругленным краям это поле ввода легко поместится в любой части веб-сайта.Для эффекта анимации набора текста у разработчика есть CSS3 и Javascript. Поскольку эффект ввода присутствует в сценарии CSS3, вы можете обрезать код, если хотите. Разработчик поделился всей структурой кода, использованной для создания этого поля поиска, чтобы вы могли легко работать с этим элементом. Чтобы получить более творческий текстовый эффект, взгляните на нашу коллекцию текстовых эффектов CSS.
Информация / Скачать демо
Предлагаемый запрос
Предлагаемый запрос — это также дизайн поля ввода для поля поиска.В этом дизайне предлагаемые слова будут предлагаться по мере ввода пользователем слова запроса. Поскольку это демонстрационная концепция, это поле ввода теперь поддерживает только одно слово. Но вы можете поработать над ним, чтобы сделать его идеальным запросом, предлагающим поле ввода. Если вы хотите быть более удобным для пользователя и располагать ресурсами, вы можете использовать искусственный интеллект для предложения слов. Например, панель поиска Google, а теперь и Gmail предлагает варианты слов в зависимости от их использования. Создание точной функции предложения слов, такой как Goole, может быть сложной задачей, но вы можете создать ее для небольшой панели поиска.
Информация / Скачать демо
Пример нечеткого поиска
Fuzzy Search Example — еще один дизайн поля ввода для полей поиска. Здесь вы также получаете предложение поиска, как и в предыдущем предложенном дизайне запроса, упомянутом выше.
Но этот дает более организованный результат, чем предыдущий. Разработчик создал его на основе веб-сайтов каталогов и веб-сайтов электронной коммерции, где вам приходится иметь дело с тоннами содержимого. Установка фильтра — всегда лучший вариант, но если вы создаете небольшой веб-сайт-каталог, такие элементы будут очень кстати.Поскольку это демо, он поддерживает только несколько слов. Вы должны вручную работать над своими предложениями слов.
Информация / Скачать демо
Взаимодействие при поиске / Граница анимации
Этот интерактивный дизайн окна ввода CSS предназначен для окон поиска. Как следует из названия, создатель использовал анимацию границ, чтобы сделать пользовательский интерфейс более привлекательным. Дизайн этого анимированного поля ввода для поиска прост и не занимает много места на экране. Следовательно, вы можете легко разместить этот дизайн поля ввода в любой части вашего веб-сайта.Внеся несколько изменений в дизайн, вы можете использовать этот дизайн и для других типов входных дизайнов.
Сценарий кода, используемый для создания этого дизайна, доступен вам в редакторе CodePen, чтобы вы могли легко редактировать и использовать код в своем дизайне.
Информация / Скачать демо
Анимация взаимодействия с вводимым текстом
Это также дизайн поля ввода анимированного текста. Плавная анимация и дизайн, основанный на материальном дизайне, делают его идеальным для всех типов современных веб-сайтов и приложений.Как и дизайн взаимодействия с окном поиска выше, этот также имеет простой и аккуратный эффект анимации. Следовательно, вы можете разместить этот дизайн даже на формах. Эффекты анимации откалиброваны и синхронизированы по времени в самом дизайне по умолчанию. Все, что вам нужно сделать, это отредактировать и настроить дизайн в соответствии с вашими потребностями. Хотя этот дизайн разработан в основном с использованием сценария SCSS, используется несколько строк javascript, чтобы сделать анимацию плавной.
Информация / Скачать демо
Текстовое поле «Анимация границы»
Обязательно сообщать пользователям, в какое поле ввода они вводят данные.
В этом примере создатель использовал тонкую, но привлекающую внимание анимацию границы, чтобы привлечь внимание пользователя. Помимо анимации границы, это обычное поле ввода. Пользователи могут просто ввести текст и перейти к следующему шагу. Благодаря простому и быстрому характеру этой анимации границы пользователи не будут раздражаться и любят использовать ваши формы. В этом дизайне используется последний скрипт CSS, поэтому вы можете использовать любые современные цвета и градиенты в соответствии с вашими потребностями.
Информация / Скачать демо
Пожиратель ввода текста
Этот пример представляет собой забавную и интересную концепцию поля ввода.Поскольку это концептуальная модель, вам необходимо настроить дизайн для обеспечения надлежащей эргономики. Когда вы нажимаете кнопку отправки после ввода текста в поле, тексты летают и сохраняются на гибком диске, который появляется в левой части экрана. Анимации плавные, но дизайн по умолчанию нельзя использовать как таковой.
Представьте, что у пользователя длинный адрес электронной почты и все письма летят на дискету; это выглядело бы неуклюже. Если вас интересуют необычные концепции, этот дизайн может вас заинтриговать.
Информация / Скачать демо
Интерактивный интерфейс платежной карты
Этот дизайн поля ввода разработан на основе дизайна кредитной карты.Пока вы получаете детали карточки пользователя, подобный дизайн поможет им легко определить, какие детали они добавляют. Сразу от номера карты до номера CVV в данном дизайне учтены все места. По мере того как пользователь заполняет детали в текстовых полях, детали отображаются в соответствующем месте карточки. Поскольку это динамическая функция, разработчик использовал HTML5, CSS3 и Javascript. Если вы ищете уникальный дизайн текстового поля, этот дизайн поля ввода может вас впечатлить.
Информация / Скачать демо
Платежная форма
Форма оплаты, как следует из названия, вы получаете поля ввода, предназначенные для форм оплаты. Этот почти похож на интерактивный интерфейс платежной карты, но в нем нет причудливого дизайна анимации карты. Такие поля ввода будут очень полезны на многих веб-сайтах по продаже онлайн-услуг и продуктов. Взгляните на нашу коллекцию шаблонов модных веб-сайтов, в которой есть все необходимые функции, подобные этой, которые были разработаны специально для вас.Чтобы создать подходящую форму оплаты, разработчик использовал HTML5, CSS3 и Javascript. Сделав несколько настроек, вы можете использовать этот дизайн формы на своем существующем веб-сайте или в приложении.
Информация / Скачать демо
Простой список дел
Simple To-Do List дает вам возможность добавить поле ввода. Так как это список дел, вы также получите флажки. Помимо добавления поля ввода, у вас также есть возможность удалить записи. Чтобы сделать эти динамические функции, разработчик использовал HTML, CSS3 и Javascript.Поскольку это демонстрационная концепция, дизайн остается очень простым, но вы можете изменить внешний вид в соответствии с вашими потребностями. Вы можете использовать подобные конструкции в шаблоне приборной панели, чтобы помочь пользователю оставаться организованным. Чтобы оживить свой дизайн, вы можете использовать различные флажки с классными анимационными эффектами. Взгляните на нашу коллекцию флажков CSS, чтобы увидеть более креативные конструкции флажков.
Информация / Скачать демо
Добавить поле динамического ввода
Поле
Добавить динамический ввод почти аналогично списку простых дел, упомянутому выше.Но этот не основан на дизайне списков дел. Два поля ввода даны подряд, если вы хотите больше строк, вы можете добавить одно, щелкнув значок плюса. Подобные элементы будут полезны в порядке отправки форм, форм запросов, а не при их заполнении. Разработчик дал вам базовую идею дизайна, вы можете добавить свои собственные функции и сделать ее идеально подходящей для ваших нужд. Чтобы создать этот динамический дизайн поля ввода, разработчик использовал HTML, CSS и Javascript.
Информация / Скачать демо
Анимированная панель поиска
Анимированная панель поиска, как следует из названия, это просто анимированная панель.При нажатии на значок поиска появляется поле ввода. Если у вас мало места на экране, такие элементы помогут вам без каких-либо оправданий добавить нужные функции. Кроме того, этот дизайн сделан исключительно с использованием CSS3 и HTML-скриптов. Следовательно, его будет легко добавить в существующий проект или веб-сайт. Вы даже можете комбинировать этот дизайн с дизайном предложений запроса, упомянутым выше, чтобы улучшить взаимодействие с пользователем. Разработчик сохранил очень простую структуру кода для легкой и быстрой настройки.
Информация / Скачать демо
Форма всплывающего сообщения
Форма всплывающего сообщения
почти аналогична контактной форме V16, упомянутой выше.При нажатии на кнопку форма становится яркой перед пользователями. Этот эргономичный и функциональный дизайн подходит для всех типов веб-сайтов и целевых страниц. Для меток поля ввода используются легкие анимационные эффекты. Эффекты перехода и анимации плавные, поэтому пользователь ощутит плавность работы. Если вы сделаете несколько оптимизаций, вы сможете получить такую же плавную работу на мобильных устройствах. Разработчик поделился всей структурой кода, использованной для создания этого простого, но эффективного дизайна поля ввода.
Информация / Скачать демо
Входные взаимодействия
Input Interactions — это простая форма в материальном стиле. Простой дизайн поля ввода позволяет легко вписаться в любую среду. Поскольку разработчик следил за дизайном в стиле материала, вы получаете цветовую схему материала. Эффекты тени и глубины используются, чтобы сделать кнопку призыва к действию уникальной среди остальных элементов. Хотя дизайн и эффекты просты, разработчик использовал скрипт Javascript и CSS3.Следовательно, у вас есть возможность улучшить этот дизайн в соответствии с вашими требованиями.
Информация / Скачать демо
33 Элегантный вводимый текст CSS для современных сайтов и приложений в 2021 году
Надоело один и тот же текстовый эффект на вашем сайте или в формах? Что ж, в дальнейшем это не должно быть таким же. Мы собрали некоторые из лучших творческих эффектов ввода текста CSS . Некоторые из них имеют фантастический оттенок, а некоторые придадут футуристический эффект. Все эти эффекты легкие и простые, поэтому вы можете легко использовать их в формах входа , контактных формах, веб-сайтах и даже на своих целевых страницах.Поскольку большинство из них — это всего лишь концепция, вам нужно поработать над частью оптимизации, чтобы она правильно работала на всех платформах и браузерах. В этом списке также есть несколько сумасшедших анимационных эффектов, поэтому убедитесь, что вы проверили их все, прежде чем выбирать один дизайн.
Контактная форма v8
Создатель этой формы использовал тонкий эффект ввода текста. Вместо того, чтобы возиться с метками полей, создатель разумно использовал текстовые поля для анимации. Выбранное текстовое поле будет выделено цветной линией, проходящей через границу текстового поля.Метки полей формы аккуратно исчезают, когда пользователь добавляет текст в поля. Шрифты, используемые в этой форме, крупнее и жирнее, поэтому люди могут четко видеть вводимый текст. Если вам нужно, вы можете использовать всю эту форму на своем бизнес-сайте. Вы также получаете работающую карту Google в качестве фона, которую вы можете использовать, чтобы показать местоположение вашего магазина или офиса.
Информация / Скачать демо
Контактная форма v10
Contact Form v10 использует тонкий эффект анимации. Если вы ищете простой, но круто выглядящий вводимый текст для вашего современного шаблона веб-сайта или веб-сайта, этот будет хорошим дополнением.Создатель этого дизайна эффективно использовал последний скрипт CSS3. Следовательно, вы получаете плавный переход и быструю загрузку страницы. Шрифты, используемые в этой форме, почти аналогичны шрифтам, используемым в версии V8, упомянутой выше. Вы можете ожидать такой же ясности и удобочитаемости текстов и в этом. Простые элементы с закругленными краями легко сочетаются с другими веб-элементами вашего веб-сайта.
Информация / Скачать демо
Контактная форма v4
Contact Form v4 — это красочная современная контактная форма со всеми необходимыми опциями, которые были разработаны специально для вас.Если вы ищете эффективный дизайн формы для бронирования, регистрации, контактных форм или любых других форм, эта форма идеально подходит. Ярлыки полей формы и заголовки полей формы представлены в этом дизайне формы. Когда пользователь вводит данные, он четко знает, что вводит. Небольшая анимация загрузки строки используется для обозначения выбранного поля формы. Создатель этой формы предоставил вам правильно организованные папки в файле загрузки, чтобы упростить вашу работу.
Информация / Скачать демо
Контактная форма v14
Контактная форма v14 имеет очень тонкий, но привлекательный эффект ввода текста.Создатель формы яркими цветами привлекает внимание пользователя к нужному полю формы. Яркий яркий цвет используется для обозначения выбранного поля формы. Для обозначения формы, заполненной с ошибкой, используется ярко-красный цвет с крестиком. Все эффекты, используемые в этой форме, тонкие, но эффективные. По умолчанию вы получаете поддержку проверки поля формы в этом, а все остальные функции правильно работают из внешнего интерфейса. Несколько настроек помогут вам легко добавить эту форму на ваш существующий веб-сайт или проект.
Информация / Скачать демо
Форма входа 9
Создатель этой формы входа в систему предоставил нам чистый и богатый дизайн формы входа. Эффекты тени и глубины используются разумно, чтобы отличить текстовую область от чистого белого фона. Шрифты, используемые в этой форме, крупнее и удобочитаемы. Эта форма изначально адаптирована для мобильных устройств, поэтому пользователи мобильных устройств также могут легко взаимодействовать с этой формой. Поскольку в этом шаблоне используется сценарий CSS3, эффекты анимации и свечения плавные.Анимация вводимого текста CSS гладкая и быстрая, поэтому пользователь может четко видеть свои записи в этой форме.
Информация / Скачать демо
Форма входа 7
Эта форма входа также принадлежит тому же создателю формы V9, который упоминался выше. Анимация текстового поля ввода CSS тонкая и чистая. Текстовое поле немного расширяется, чтобы пользователь мог легко определить поле формы, с которым он работает. Поскольку это форма входа в систему, у вас есть возможность показать / скрыть вводимый текст в поле пароля.Эта форма отлично работает из внешнего интерфейса, все, что нам нужно сделать, это позаботиться о внутренней интеграции.
Шрифт по умолчанию, используемый в этой форме, аккуратный и легко читаемый, поэтому вы можете использовать эту форму как таковую без каких-либо настроек. Даже если вы хотите настроить этот шаблон, вы можете легко работать с кодом. Разработчики этого шаблона следовали стандартам кода, которым следуют все профессиональные разработчики, поэтому настройку и добавление новых функций в этой форме будет легко.
Информация / Скачать демо
Сообщить мне
Этот дизайн вдохновит тех, кто ищет компактный, многоцелевой дизайн текстового поля ввода. Создатель элегантно обработал условия и элементы дизайна, чтобы обеспечить плавный пользовательский интерфейс. Например, до тех пор, пока вы не введете правильный адрес электронной почты с символом «@» и правильный TLD, текстовое поле останется без ответа. После того, как вы введете письмо и отправите его, вы увидите сообщение с благодарностью.В целом, Notify me — это хорошо продуманный дизайн входного текста CSS. Поскольку весь дизайн создается исключительно с использованием сценария CSS3, вы можете легко обработать код и использовать его на своем веб-сайте или в приложении.
Информация / Скачать демо
Поле ввода с подчеркиванием
Если вы хотите создать текстовое поле ввода в стиле ретро с разрывными линиями, этот фрагмент кода пригодится вам. Создатель поместил подчеркивание под каждым символом, чтобы между каждым символом оставалось достаточно места.Кроме того, аудитория может легко читать контент как на компьютерах, так и на устройствах с маленьким экраном. Весь скрипт кода прост, как и его дизайн; в основном CSS-скрипт используется разработчиком. Следовательно, вы можете легко редактировать код и правильно использовать его на своем веб-сайте или в формах.
Информация / Скачать демо
Поле ввода электронной почты
Поле ввода электронной почты
представляет собой чрезвычайно простой дизайн поля ввода. Создатель не использовал анимацию в этом дизайне поля ввода. Эффекты тени и глубины используются для отличия поля формы от кнопки призыва к действию.В этом дизайне используются новейшие скрипты CSS и HTML; Поэтому в этот дизайн можно добавлять любые современные эффекты и элементы. Помимо интерактивной анимации, этот дизайн имеет все основные параметры и функции, оптимизированные должным образом.
Информация / Скачать демо
Мигающий вводимый текст CSS
Это простая и понятная анимация ввода текста CSS. Поскольку данный эффект прост, вы можете легко использовать его в любой части сайта. Эффект мигания плавный и плавный, поэтому он легко справляется со скоростью набора текста пользователем.Поскольку это концептуальная модель, в этой анимации ввода текста CSS есть несколько сбоев; Но ничего серьезного, вы легко можете исправить это, отредактировав несколько строк кода. Создатель поделился всем сценарием кода, использованным для создания этой концепции. Следовательно, разработчик может легко использовать этот дизайн в своем проекте.
Информация / Скачать демо
Анимированный вводимый текст CSS
Эта анимация вводимого текста CSS может использоваться для полей формы. Создатель этого дизайна анимировал только метку поля формы, поэтому тексты, добавленные в основное поле формы, будут знакомы.Как и дизайн, скрипт кода, использованный для создания этого дизайна, также аккуратный и простой. Создатель в основном использовал коды CSS3 в этом дизайне, поэтому настройка и использование кода в вашем проекте будет легкой работой для разработчиков. Если вы ищете формы с интерактивным эффектом, вы можете использовать любой из упомянутых выше шаблонов форм.
Информация / Скачать демо
Градиентная рамка Focus Fun
Как следует из названия, этот дизайн входного текста CSS использует анимацию границы.Использование граничной анимации помогает отличить главное / выбранное поле формы от остальных. Кроме того, пользователь может без проблем вводить текст в область основного поля. Как и предыдущий пример ввода анимированного текста CSS, этот также создан исключительно с использованием скрипта CSS3. Поскольку это дизайн на основе CSS3, он может легко обрабатывать все современные цвета и эффекты анимации. В этом примере вы получаете естественную и привлекательную анимацию текстового поля, которую можно использовать во всех типах современных веб-сайтов и форм. Для получения более интересных анимаций границы взгляните на наши примеры анимации границы CSS.
Информация / Скачать демо
Входной текст Material Design
Создатель этого эффекта ввода текста дал вам дизайн формы. Вы можете использовать это для текстовых эффектов ввода текста в формах входа и регистрации. Тексты меток полей формы небольшие и аккуратные, поэтому их можно использовать во всех типах форм. Метки полей формы перемещаются вверх, чтобы дать вам место для добавления текста. Но в анимации есть небольшое смещение, которое вы легко можете исправить. Эффекты тени и глубины используются разумно, чтобы различать веб-элементы и поля ввода текста.Внизу формы у вас есть значок Twitter, чтобы добавить ссылку на свой профиль.
Информация / Скачать демо
Бумага, имитирующая вводимый текст
Если вам нужна чистая и тонкая анимация ввода текста для ваших контактных форм, то это то, что вам нужно. Профессиональный дизайн этого эффекта ввода текста делает его идеальным вариантом для любого типа текстовых полей на вашем веб-сайте или в приложении. Эффект быстрой анимации используется для обозначения поля формы, выбранного для добавления деталей.Метки полей формы плавно перемещаются вверх и остаются там, чтобы вы могли четко добавлять детали. В демонстрации по умолчанию у вас есть три поля формы, но вы можете добавить столько полей формы, сколько захотите. Вам предоставлен доступ ко всей структуре кода, поэтому разработчикам не составит труда ее настроить.
Информация / Скачать демо
Плавающие этикетки только для CSS
Ну, в приведенном выше примере вы получаете весь набор форм и других эффектов. Вы должны вручную разделить эффект ввода текста, который вам нравится.Чтобы упростить задачу, создатель этого текстового эффекта предоставил вам структуру кода только с плавающими метками. Поскольку это чистый текстовый эффект CSS, вы можете легко добавить его в существующий дизайн. Эффект плавания гладкий и чистый, без задержек или перекосов. По мере того, как текст поля формы перемещается над текстовой областью, убедитесь, что вы оставили достаточно места между каждым текстовым полем в форме.
Информация / Скачать демо
Введите текстовое значение из модального окна
Вместо того, чтобы просто впускать пользователей внутрь вашей панели управления или приложения, вы можете тепло приветствовать их при входе в систему.Этот эффект ввода текста показывает приветственное сообщение с именем пользователя после входа в систему. Если вам нужно, вы даже можете добавить собственное сообщение, чтобы создать персонализированное сообщение. Например, если вы используете это в своем магазине электронной коммерции, вы можете приветствовать пользователя, указав его имя, и сообщить ему о текущих предложениях и специальных продажах. Для более плавного эффекта анимации создатель этого дизайна использовал последние версии HTML5, CSS3 и Javascript. Еще одна полезная функция в этом дизайне — поле формы поддерживает проверку поля.Сделав несколько настроек, вы можете легко использовать этот эффект ввода текста на своем веб-сайте или в приложении.
Информация / Скачать демо
Переключатель видимости пароля
Переключатель видимости пароля — это эффект, который может понадобиться на всех типах веб-сайтов и приложений. Поскольку в настоящее время людям необходимо запоминать множество паролей, показывать им безопасный ввод текста — хорошая идея. Создатель этого эффекта ввода текста использовал анимацию быстрого переворачивания, которая не занимает много места.Следовательно, вы можете использовать этот эффект даже на небольших участках. В качестве основы разработчик использовал скрипты кода HTML и CSS. Чтобы сделать переходы плавными, он также использовал несколько строк Javascript. Поскольку используемый эффект минимален, вы можете легко сделать его с помощью CSS3. Исходя из структуры вашего кода и удобства, вы можете настроить код по своему желанию.
Информация / Скачать демо
Анимация взаимодействия с вводимым текстом
Если вы хотите попробовать что-то отличное от обычной анимации текстового поля ввода, эта анимация привлечет ваше внимание.Создатель сделал анимацию очень простой и понятной, чтобы вы могли легко включить эту дизайнерскую идею во все области. Чтобы сделать анимацию плавной и интерактивной, создатель использовал фреймворки CSS и Javascript. Весь скрипт кода доступен вам в редакторе Codepen. Следовательно, вы можете легко настроить скрипт кода и визуализировать его в редакторе. Из-за простой природы этого дизайна входного текста вы также можете использовать его для мобильных интерфейсов.
Информация / Скачать демо
Входной текстовый материал с градиентом
Как следует из названия, создатель использовал градиентный цветовой маркер для текстового поля ввода.Цвет статического градиента используется в дизайне по умолчанию. Вы можете использовать анимированные движущиеся градиентные цвета, чтобы сделать текстовое поле ввода еще более интересным и привлекательным. Как и дизайн, сценарий кода также остается простым. Следовательно, вы можете легко использовать этот дизайн на своих веб-страницах и в формах без каких-либо проблем. Хотя это концептуальная модель, создатель заставил все анимации и элементы работать в надлежащем состоянии.
Информация / Скачать демо
Текстовое поле «Анимация границы»
Наиболее распространенной анимацией текстового поля ввода является анимация границы.Создатель сделал анимацию ввода текста простой, но привлекательной, чтобы привлечь внимание пользователя. Вы можете использовать эту анимацию текстового поля ввода для небольших форм, однострочных полей ввода и контактных форм. Поскольку анимация запускается при нажатии / нажатии на поле ввода, вы можете легко использовать этот дизайн как для настольного, так и для мобильного интерфейса. В основном в этом дизайне используется скрипт кода CSS; следовательно, вы можете легко обрабатывать этот код и свои пользовательские функции, чтобы придать уникальный вид.
Информация / Скачать демо
Rise — Анимация метки текстового поля
Это одна из наиболее часто используемых анимаций текстовых полей ввода.Метка поля формы аккуратно приподнята над полем формы, чтобы дать пользователю достаточно места для ввода данных. Создатель сделал тексты жирнее и крупнее в самом дизайне по умолчанию. Таким образом, вы можете использовать этот код без каких-либо проблем. Чтобы сделать дизайн четким и плавным, создатель использовал новейшие фреймворки HTML, CSS и Javascript. Потратив несколько минут, вы легко сможете использовать этот код в своем дизайне.
Информация / Скачать демо
Пожиратель ввода текста
Это творческая концепция, и вы можете использовать ее как вдохновение.После того, как вы нажмете кнопку отправки, все тексты перетекают на дисковод гибких дисков в левой части экрана. Идея действительно интересная, но вам нужно настроить дизайн и эффекты анимации, прежде чем реализовывать ее для публичного использования. Весь код, который скрипт использует для создания этого дизайна, доступен вам в редакторе CodePen. Следовательно, вы можете легко редактировать и визуализировать свои настройки в самом редакторе.
Информация / Скачать демо
Форма регистрации материалов
Дизайн формы входа в систему
Material дает не только эффект ввода текста, но и весь эффект анимации формы входа.Как следует из названия, в этой форме используется материальный дизайн. Эффекты гладкой анимации выглядят привлекательно благодаря дизайну материалов и их цветовой гамме. Поля формы отлично работают из внешнего интерфейса. Все, что вам нужно сделать, это позаботиться об интеграции с серверной частью. Разработчик этого эффекта сделал его очень простым, чтобы он загружался быстрее и отлично работал в заданной области. Наряду с формой входа вы также получаете форму регистрации, созданную специально для вас.
Информация / Скачать демо
Необычное анимированное поле ввода
Если у вас есть веб-сайт с дизайнерскими ресурсами или вы дизайнер шрифтов, подобные инструменты помогут вам привлечь вашу аудиторию.Разработчик этого поля ввода текста помогает отображать различные текстовые эффекты. Слева у вас есть раскрывающийся список для выбора эффекта, и вы можете визуализировать его в текстовом поле справа. Вы можете использовать подобные элементы на своем личном веб-сайте, чтобы продемонстрировать свои навыки. Если вы фрилансер, взгляните на нашу бесплатную коллекцию шаблонов веб-сайтов для фрилансеров, чтобы вывести свой бизнес на новый уровень; Кроме того, они очень гибкие, поэтому вы можете легко использовать подобные элементы в этих шаблонах.
Информация / Скачать демо
Входной чейнджер Live Style
Input Live Style Changer почти аналогичен упомянутому выше эффекту ввода текста, но в более упрощенной форме.В этом дизайне вы получаете только три типа анимации, и пользователь может использовать вкладки ниже для переключения между эффектами. Если вы предлагаете более одного варианта для типа шрифта, подобные элементы помогут пользователю четко понять ваш шрифт. Легкие анимационные эффекты используются, чтобы оживить впечатление. Разработчик этого дизайна использовал тяжелый HTML, CSS и Javascript. Вы можете настроить этот дизайн в зависимости от структуры кода, которой вы следуете.
Информация / Скачать демо
Подтверждение ввода электронной почты
Дизайнер этого текстового поля ввода объединил текстовое поле и кнопку призыва к действию в один элемент.Когда пользователь предоставляет правильную информацию в соответствии с вашим условием проверки поля, становится доступной кнопка призыва к действию. Для этого динамического текстового поля разработчик использовал CSS и Javascript. Если у вас есть ограничения по пространству, такие элементы не только сэкономят вам место, но и обеспечат надлежащую функциональность. Эффекты анимации плавные и плавные, поэтому загрузка не займет много времени. Сделав несколько оптимизаций, вы можете легко использовать этот элемент на своем веб-сайте или в приложении.
Информация / Скачать демо
Ввод тегов
Подобные текстовые поля ввода повысят вашу производительность. Если вы знакомы со средой WordPress, дизайн этого текста для ввода тегов похож на него. Как только вы добавите свой тег и поставите запятую, он будет добавлен в ваш список тегов. Чтобы показать пользователям, что теги добавлены успешно, используется дизайн маркера. Удаление тегов также стало простым: просто нажмите клавишу Backspace, чтобы удалить ненужные теги. Добавив к нему еще несколько функций, это поле для ввода текста станет идеальным дополнением для вашей панели инструментов или веб-сайта.Взгляните на нашу бесплатную коллекцию шаблонов панели инструментов, чтобы узнать о более удобных встроенных функциях, подобных этой, которые сэкономят ваше время.
Информация / Скачать демо
Анимация ввода пользовательского интерфейса
Input UI Animation даст представление о вашем многопользовательском интерактивном текстовом редакторе. Если вы хотите дать пользователям возможность оставлять комментарии, как в Google Docs, дизайн вам поможет. Эффект простой и гладкий, поэтому загружается быстро. Этот дизайн также можно использовать для творческой области дизайна блога.Поскольку количество мобильных пользователей растет, создание адаптивных элементов становится обязательным. Как и аккордеоны, этот дизайн также сэкономит вам место и будет лучше работать как в мобильной, так и в настольной версиях вашего дизайна. Взгляните на нашу коллекцию аккордеонов CSS, чтобы увидеть более впечатляющий дизайн и забавные эффекты анимации.
Информация / Скачать демо
Pixie Dust Input
Pixie Dust Input — это текстовое поле ввода в стиле фэнтези. Если вы создаете какой-либо креативный развлекательный веб-сайт или любой такой веб-сайт, такие элементы, как добавят жизни на ваш сайт.Как следует из названия, при вводе текста в текстовое поле появляется пиксельная пыль. Эффект минимальный и чистый, поэтому вы можете включить его в любую часть вашего сайта. Этот дизайн сделан исключительно с использованием CSS и Javascript. Разработчик поделился кодом напрямую с вами, поэтому вы можете редактировать и просматривать результаты, прежде чем использовать их на своем веб-сайте или в приложении. Подобные эффекты будут выступать в качестве привлекательного элемента на целевой странице, при правильном использовании вы можете получить лучший отклик.
Информация / Скачать демо
Ввод анимированного текста пользовательского интерфейса
Если вы ищете сбалансированный эффект анимации для своего веб-сайта или приложения, этот эффект может вас впечатлить.Эффект, используемый в этом текстовом поле ввода, прост и изящен; тем не менее, он занимает некоторое горизонтальное пространство, поэтому убедитесь, что вы оставили достаточно места для элементов, прежде чем его использовать. Помимо эффекта анимации, это обычное текстовое поле, которое можно использовать на всех веб-сайтах и в формах. Сделав несколько настроек, его можно использовать в вашем проекте. Поскольку вам предоставлен доступ к сценарию кода, используемому для этой анимации вводимого текста, работать над ним будет несложно.
Информация / Скачать демо
Адаптивный заполнитель
В отличие от упомянутого выше эффекта Animated UI, этот практически возможный дизайн входного текста.Вы можете использовать его для всех типов веб-сайтов и форм. Поскольку эффекты минимальны, он занимает меньше места на экране. Когда пользователь вводит текст в текстовое поле, тег файла плавно перемещается наверх. Еще одним преимуществом этого дизайна является то, что заполнитель тега является адаптивным заполнителем, поэтому он может эффективно обрабатывать текстовые пространства.
Информация / Скачать демо
Необычное поле ввода
Поле ввода Fancy — это упрощенная версия поля ввода Fancy Animated, упомянутого выше.В этом вы получаете только одну текстовую анимацию. Вместо действующего простого типа это текстовое поле дает небольшую анимацию перехода при вводе символов. Поскольку это динамическая функция, разработчик использовал несколько строк Javascript для плавных и четких переходов. Эффект необычного поля ввода можно использовать в любой части сайта. Благодаря простому дизайну он хорошо сочетается с другими веб-элементами. Если вы хотите иметь более живую текстовую анимацию для содержимого вашего веб-сайта, взгляните на нашу коллекцию текстовых эффектов CSS.
Информация / Скачать демо
Входные данные только для CSS
Ввод материалов только для CSS — это простой шаблон формы для материального дизайна. Хорошо структурированный дизайн с чистыми формами делает его идеальным вариантом для любого профессионального дизайна. Метки полей формы аккуратно перемещаются вверх, когда пользователи взаимодействуют с полями формы. Еще одно преимущество этого дизайна текстового поля — поддержка проверки поля формы. Все, что вам нужно сделать, это внести желаемые изменения и добавить их на свой веб-сайт или в приложение.
Информация / Скачать демо
8 интересных фрагментов CSS для ввода текста
Поля ввода — это элементы HTML, которые позволяют пользователю вводить текст. Обычно они являются частью какой-то формы, и обычно их игнорируют, когда дело доходит до стиля. Если не игнорировать их полностью, они обычно не требуют особого ухода. Может быть, дизайнер добавит прохладный цвет или мягкий радиус границы, но часто это все. Жалко, что к ним редко применяют стиль, потому что у них такой большой потенциал! Если вы хотите придать немного любви и чутья своим полям ввода текста, взгляните на список фрагментов ввода ниже для небольшого вдохновения.
1. Поле ввода плавающих меток
Плавающие метки в этом фрагменте имеют очень минималистский стиль, но когда они сфокусированы, возникает классный эффект, когда метки (которые могут выглядеть так, как будто они являются текстом-заполнителем, но это не так!) Меняются с серого к синему. Когда вы начинаете печатать, они становятся очень маленькими и с помощью переходов CSS плавно перемещаются в верхнюю часть поля ввода.
2. Расширение ввода текста
Поля ввода в этом фрагменте расширяются, когда вы нажимаете на них.Они плавно расширяются не только для освобождения места для ввода текста, но и для отображения текста-заполнителя, что приятно.
3. Трехмерная форма с одним вводом
Этот уникальный фрагмент формы ввода придает полю ввода текста трехмерный эффект, который проявляется при наведении курсора. Весь эффект очень гладкий и профессиональный. Было бы отличным дополнением для тех, кто хочет добавить в свои проекты изящества и лоска.
4. Поле ввода с эффектами наведения
Этот фрагмент кода создает изящные поля ввода с красивыми эффектами наведения.Когда на них наводят курсор, метка плавно сдвигается влево, открывая фактическое поле ввода, в которое пользователь может вводить текст.
5. Ввод с анимацией фокуса
Поле ввода в этом фрагменте имеет плавную анимацию CSS, которая возникает, когда поле ввода находится в фокусе. Этикетка меняет положение, появляется значок пера и перемещается вперед и назад, как если бы он что-то писал.
6. Анимированный поисковый ввод
Этот фрагмент поля ввода поиска появляется, когда щелкают значок увеличительного стекла.Он включает в себя приятный плавный переход CSS и значок выхода на случай, если вы по ошибке обнаружили ввод для поиска.
7. Стильные поля ввода
Этот фрагмент поля ввода создает очень стильные поля ввода, которые включают плавные переходы CSS, которые запускаются, когда поле ввода фокусируется. Переходы придают фрагменту красивый анимированный эффект.
8. Необычный ввод текста
Эти текстовые поля очень стильные и могут быть использованы, чтобы добавить классной атмосферы практически в любой проект с современным стилем и чувственностью.
10 фрагментов кода для создания красивых форм
Каждому веб-сайту обычно нужен какой-либо тип формы, будь то страница оформления заказа или простая страница контактов.
Очень важно убедиться, что ваши формы работают, поэтому удобство использования — номер 1. Но эстетика также важна, поскольку заслуживающий доверия дизайн всегда более привлекателен.
Если вы зациклились на дизайнерских идеях, эта коллекция может вам помочь. Это коллекция из 10 форм с бесплатным исходным кодом. Вы найдете множество различных цветовых схем, стилей полей ввода, типографских стилей и многое другое.
Кроме того, все они размещены бесплатно, так что вы можете копировать и играть с кодом по своему вкусу.
Панель инструментов веб-дизайнера
Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!
1. Материальный дизайн
Все знают о языке материального дизайна Google за последние несколько лет. Концепции материального дизайна были нацелены на приложения для Android, но быстро распространились в Интернете.
Если вам нравится минималистский стиль пользовательского интерфейса материалов Google, ознакомьтесь с этой формой материалов, созданной Джоном Ульманном.
Он работает на Sass и Pug для предварительной обработки CSS / HTML. Это также довольно легкая форма, и элементы материального дизайна должны отображаться одинаково во всех браузерах.
Поистине источник вдохновения для всех дизайнеров материалов.
2. Под водой
Совершите путешествие в океан в этой уникальной контактной форме, созданной в водном стиле.
На всем фоне страницы используется повторяющийся узор, создающий волны океанской воды. Но маленькие анимированные рыбки — это совсем другая история, которую можно увидеть с фонового изображения.
Plus, когда вы выбираете поле ввода, дружелюбный осьминог появляется для приветствия. Как мило!
3. Форма Bootstrap 3
Стили Bootstrap по умолчанию довольно скучны, и на данный момент они действительно используются до смерти. Всякий раз, когда я вижу сайт Bootstrap с такими же общими стилями, я могу только представить, что дизайнер был слишком ленив, чтобы настраивать его, или слишком сосредоточился на опыте, чтобы заботиться.
Эта форма BS3 делает все правильно, создавая поверх фреймворка Bootstrap.Он использует несколько рестайлингов в полях ввода и кнопку отправки, чтобы создать симпатичную форму Bootstrap, о которой вы даже не догадывались, была Bootstrap.
Если вы используете макет BS3, определенно подумайте о такой переработке ваших форм. Вы также можете попробовать использовать стороннюю платформу, созданную на основе Bootstrap, для более индивидуального дизайна.
4. Elegant Contact
Благодаря значкам Font Awesome и некоторым базовым адаптивным стилям эта контактная форма действительно единственная в своем роде.
Я всегда рекомендую добавлять значки в формы, особенно для больших дизайнов.Чем больше полей, тем больше сомнений, и пользователи просто хотят пролистывать формы без сучка и задоринки.
Эти простые значки добавляют подсказку к каждому полю, так что с первого взгляда можно легко определить, какая информация требуется.
И если вы ищете что-то немного уникальное, попробуйте добавить в смесь другой шрифт.
5. Крошечный логин
Иногда мелочи — действительно самое лучшее. И этот пользовательский интерфейс формы доказывает это, создавая суперминифицированную форму входа в систему, которая просто потрясающая.
Типографика огромна с дизайном форм, и я часто предпочитаю меньшие шрифты в полях входа в систему. Это действительно зависит от веб-сайта и от того, насколько мелкий текст вписывается в макет.
Но у этой формы также есть небольшой графический шаг прогресса, висящий сбоку, объясняющий процесс формы. Учитывая, что всего два поля, это кажется глупым, но для больших форм регистрации этот индикатор выполнения окажется неоценимым для взаимодействия с пользователем.
6. Комбинация входа и регистрации
Если вы хотите сократить время входа в систему, вы можете попробовать объединить форму входа и форму регистрации на одной странице.Это намного проще, чем вы думаете, и вы можете увидеть милую демонстрацию в этой статье.
Всякий раз, когда вы нажимаете ссылки входа / регистрации сбоку, вы найдете красивую пользовательскую анимацию, поворачивающую формы для просмотра. Все это работает через jQuery, но анимация может работать и через CSS.
Но я заметил одну ошибку в этом макете, когда нижняя часть «скрытой» формы все еще видна после переключения. Вы можете решить эту проблему с помощью свойства видимости CSS или немного переместив позицию за границы.
7. Классная доска Контакт
Вот действительно уникальный стиль формы, который определенно прыгает со страницы. В этой контактной форме на классной доске используется фоновый градиент для создания эффекта отражения света от доски.
Плюс деревянный бордюр помогает продать эту вещь как настоящую.
Создатель
Грег Свит даже использует собственный веб-шрифт, который выглядит как обычный человеческий почерк. Это идеально подходит для добавления последнего штриха к форме, чтобы действительно было ощущение, что вы снова в школе.
8. Расчет по кредитной карте
Я видел много форм для оформления заказа, но этот дизайн Фабио Оттавиани, пожалуй, лучший из тех, что я когда-либо встречал.
Он использует JavaScript для обработки проверки поля ввода, но кредитная карта — это все CSS. Он анимируется на основе чисел, которые вы вводите в форму, и даже поворачивается назад, когда вы вводите номер CVV кредитной карты.
9. Индивидуальная регистрация
Для формы регистрации на чистом CSS этот фрагмент действительно важен.Довольно просто отдыхать в одном контейнере с небольшой тенью.
Но поля ввода сильно настроены, включая пространство, необходимое для добавления этих значков в каждое из них.
Каждый раз, когда вы выделяете поле, его граница становится зеленой как мох. Вы заметите, что значок тоже меняет цвет! Даже отдельные меню для кредитных карт имеют свои собственные стили.
Это довольно сложный эффект для создания чисто на CSS, но разработчик Хосе Карнейро сделал это.
10. Плавающие этикетки
Плавающие этикетки на заказ — одни из моих любимых направлений в дизайне форм. Они всегда помогают повысить удобство использования и дают четкое объяснение поля, даже если вы его заполнили.
Взгляните на эту форму плавающей метки, работающую на CSS3 и Compass.
Создатель
Антон Симанов использует jQuery для этикеток, но все это написано на заказ без каких-либо плагинов. Не говоря уже о том, что его решение работает для всех типичных стилей ввода, включая текстовые поля и меню выбора.
Неважно, какой стиль формы вы выберете, я, конечно, надеюсь, что эта галерея может дать вам несколько идей и отрывков, которые помогут вам двигаться дальше.
Чем больше вы изучаете шаблоны проектирования, тем больше идей у вас будет для воплощения собственных проектов. CodePen — отличный сайт для сбора этих идей.
40 крутых дизайнов полей ввода CSS — Bashooka
Главная / Кодирование / 40 крутых дизайнов полей ввода CSS
по Анри —
Формы
HTML очень универсальны и позволяют отправлять широкий спектр различных типов ввода. Поля ввода — это то, что позволяет вашим пользователям заполнять вашу форму. В зависимости от того, какую информацию вы запрашиваете, существуют различные типы полей — текстовые поля, ползунок диапазона, цвет, раскрывающиеся списки, флажки, переключатели, датпикеры и другие. Итак, вот несколько действительно интересных дизайнов полей ввода CSS для вдохновения для создания полностью доступных, настраиваемых и функциональных полей ввода.
Раскройте потенциал WordPress Ad
Великолепная коллекция из 11 000+ тем WordPress, включая шаблоны Bootstrap и ресурсы дизайна
Скачать сейчас
Ручка Язэ
Ручка Клемента Роша
Ручка Алексея Константинова
Ручка Джеффри Крофте
Ручка Кенана Юсуфа
Ручка Хорхе Эпунана
Ручка Simurai
Ручка Маурисио Альенде
Ручка Ленни Сиривонг
Ручка Джерома Рендерс
Ручка Эрика Грюча
Ручка Анжелы Он
Ручка Фабио Оттавиани
Ручка Дилана Раги
Ручка Лины Лаванья
Ручка Дэвида А.
Ручка Мэтта Систо
Ручка Bennett Feely
Ручка Рафаэля Гонсалеса
Ручка Эндрю Таннеклиффа
Ручка Шоу
Pen Пауло Нуньес
Ручка Анджелы Веласкес
Ручка Бадди Рино
Ручка Йохана Ханевельда
Ручка Арона
Ручка Адама Куна
Ручка Бенджамина Ретора
Ручка Trevan Hetzel
Ручка Фил Роуз
Ручка Андреаса Сторма
Pen By Kunuk Nykjaer
Ручка Валерия
Ручка Оливер Кноблич
Ручка Марка Кана
Ручка Саймона Геллнера
Ручка Риккардо Пазианотто
Ручка Себастьяна Поппа
Ручка Лукаса Беббера
Ручка Габриэль Ви
CSS форма ввода javascript
пользовательских стилей CSS для полей ввода и текстовых полей
Это выпуск №21 из серии, посвященной современным решениям CSS для проблем, которые я решал в течение последних 13 с лишним лет, работая фронтенд-разработчиком .
Мы собираемся создать настраиваемые стили ввода и текстовой области, которые будут иметь почти идентичный вид в популярных браузерах. Мы специально стилизуем типы ввода текст , дата и файл , а также стили только для чтения, и , отключенные состояния .
Прочтите, чтобы узнать, как:
- сброс стилей ввода
- используйте
hslдля тематики входных состояний - Обеспечивает соответствие всех состояний требованиям контрастности
- сохраняет воспринимаемое состояние
: фокусдля режима высокой контрастности Windows
Это четвертый выпуск в мини-серии о полях форм Modern CSS.Посмотрите выпуски 18–20, чтобы узнать, как стилизовать другие распространенные типы полей формы, включая переключатели, флажки и выборки.
Распространенные проблемы с собственными стилями ввода #
Между стилями ввода текста немного больше четности, чем мы видели с радио, флажками и выборками, но тем не менее несоответствия.
Вот скриншот нестилизованных входов, которые мы собираемся рассмотреть сегодня в (слева) Chrome, Safari и Firefox.
Мы будем стремиться унифицировать первоначальный внешний вид для всех браузеров и общих типов полей.
Поле даты
уникально тем, что Chrome и Firefox предоставляют форматирование и всплывающий календарь для выбора, в то время как Safari не предлагает сопоставимых функций. Мы также не можем создать это в CSS, поэтому наша цель — как можно глубже создать похожий начальный внешний вид. Проверьте caniuse для ввода даты / времени.
Базовый HTML #
Мы рассматриваем множество типов полей, поэтому посмотрите полный список на CodePen. Но вот необходимый HTML для ввода текста и текстового поля.
Чтобы упростить наши стили и подготовиться к работе с каскадом, мы добавили только один класс CSS — input — который помещается непосредственно в поле ввода текста и в текстовое поле.
Метка не является частью нашего упражнения по стилизации, но она включена в качестве общего требования, особенно с для атрибута , имеющего значение id на входе.
Создание переменных CSS для темы #
Для этого урока мы собираемся попробовать немного другую технику создания тем, используя значения hsl .
Мы установим серый цвет для границы, а затем разделим синий цвет, который будет использоваться в нашем состоянии : focus , на его значения hsl, включая: h для «оттенка», s для «насыщенности». , и л для «легкости».
: корень {
--input-border: # 8b8a8b;
- вход-фокус-ч: 245;
- вход-фокус-s: 100%;
- вход-фокус-l: 42%;
} Каждое из руководств для наших полей формы включает немного другой метод тематизации, который можно извлечь и использовать не только формы!
Доступный контраст #
Как и все элементы пользовательского интерфейса, граница ввода должна иметь контраст не менее 3: 1 по сравнению с окружающей средой.
И состояние : focus должно иметь контраст 3: 1 по сравнению с несфокусированным состоянием , если оно включает в себя что-то вроде изменения цвета границы или , в соответствии с черновиком WCAG 2.2, толщиной больше или равной 2px .
В черновике WCAG 2.2 внесены некоторые незначительные изменения в требования : focus , и я рекомендую вам ознакомиться с ними.
Сброс стилей #
Как и во всех моих руководствах в качестве передовой современной практики, мы сначала добавляем следующий сброс:
*,
* :: before,
* :: after {
box-sizing: border-box;
} Как видно из начального состояния полей в браузерах, некоторые выдающиеся различия заключались в типе границы, цвете фона и свойствах шрифта.
Интересно, что font-size и font-family не наследуются от документа, как элементы типографики, поэтому нам нужно явно установить их как часть нашего сброса.
Также следует отметить, что входной размер font-size должен вычисляться как минимум до 16 пикселей, чтобы избежать срабатывания масштабирования при взаимодействии в мобильном Safari. Обычно мы можем предположить, что 1rem равно 16px , но мы явно установим его как резерв, а затем воспользуемся новой функцией CSS max , чтобы установить 16px как минимум в случае, если оно меньше 1em (h / t Дэну Бурзо за эту идею).
.input {
font-size: 16px;
font-size: max (16px, 1em);
семейство шрифтов: наследование;
отступ: 0,25 мкм 0,5 мкм;
цвет фона: #fff;
граница: сплошная 2px var (- input-border);
радиус границы: 4 пикселя;
} Мы установили границу для использования переменной темы, а также создали слегка закругленный угол.
После этого обновления мы уже неплохо выглядим:
Это может быть трудно заметить на этом снимке экрана, но есть еще одно отличие — высота каждого поля.Вот сравнение ввода текста с вводом файла, чтобы лучше увидеть эту разницу:
Давайте рассмотрим это с помощью следующего, которое мы применяем к нашему классу .input , пока он не помещается в текстовое поле :
.input: not (textarea) {
line-height: 1;
высота: 2,25 бэр;
} Мы включили line-height: 1 , поскольку, когда это не textarea , невозможно, чтобы ввод был многострочным.Мы также установили нашу высоту в rem из-за соображений, касающихся конкретно типа ввода файла. Если вы знаете, что не будете использовать тип ввода файла, вы можете использовать здесь em для гибкости при создании входных данных различного размера.
Но, что очень важно, мы потеряли различие между редактируемыми и отключенными типами ввода. Мы также хотим определить только для чтения с большим намеком на то, что он также не редактируется, но все еще интерактивен. И у нас есть еще немного работы, чтобы сгладить тип ввода файла.И мы хотим создать наше тематическое состояние : focus .
Ввод файла CSS #
Давайте еще раз посмотрим только на ввод файла в Chrome, Safari и Firefox:
Мы не можем стилизовать кнопку, созданную браузером, или изменить текст приглашения, но сброс, который мы предоставили до сих пор, немного поработал, чтобы можно было использовать наш пользовательский шрифт.
Мы сделаем еще одну настройку, чтобы немного уменьшить размер шрифта, поскольку при просмотре с другими типами полей унаследованная кнопка кажется довольно большой, и font-size - наш единственный оставшийся вариант для ее решения.Для этого нам нужно отрегулировать верхнее заполнение, так как мы настроили его на основе em .
input [type = "file"] {
font-size: 0.9em;
набивка: 0,35 бэр;
} Если вы ожидали более изящного решения, есть много людей, которые покрыли его. Моя цель здесь заключалась в том, чтобы предоставить вам основу, на которой вы затем можете строить.
только для чтения CSS-стиль #
Атрибут только для чтения , хотя и не используется часто, предотвращает дополнительный ввод данных пользователем, хотя значение может быть выбрано, и оно по-прежнему может быть обнаружено вспомогательными технологиями.
Давайте добавим несколько стилей, чтобы получить больше подсказки о том, что это поле по сути является заполнителем для ранее введенного значения.
Для этого нацелимся на любой .input , который также имеет атрибут [только для чтения] . Селекторы атрибутов - очень удобный метод с широким применением, и его определенно стоит добавить (или обновить) в вашем наборе инструментов CSS.
.input [только для чтения] {
border-style: dotted;
курсор: не допускается;
цвет: # 777;
} В дополнение к замене на границу с точками , мы также назначили ей запрещенный курсор и применили средне-серый цвет текста.
Как видно на следующем гифке, пользователь не может взаимодействовать с полем, кроме как выделить / скопировать значение.
Disabled Input and Textarea Style #
Подобно только для чтения , мы будем использовать селектор атрибутов для обновления стиля для отключенных полей. Мы прикрепляем его к классу .input , поэтому он применяется к текстовым областям, а также к другим нашим типам ввода.
Мы будем использовать нашу переменную CSS, чтобы обновить цвет границы до приглушенного серого, а фон поля - до очень светло-серого.Мы также снова применим курсор not-allowed как дополнительный намек на то, что поле не является интерактивным.
.input [отключено] {
--input-border: #ccc; цвет фона: #eee;
курсор: не допускается;
}
И вот результат как для ввода текста, так и для текстового поля:
Примечание о специальных возможностях :
отключено Поляне обязательно могут быть обнаружены вспомогательными технологиями, поскольку на них нельзя сфокусироваться.Они также не обязаны соответствовать даже типичному порогу контрастности 3: 1 для элементов пользовательского интерфейса, но мы оправдали ожидания пользователей, установив для них оттенки серого.
Стили текстовой области #
Наше текстовое поле действительно близко, но есть одно свойство, о котором я хочу упомянуть, поскольку оно уникально для внутреннего поведения текстовых полей.
Это свойство - resize , которое позволяет вам указать, в каком направлении textarea может быть изменен, или может ли оно вообще.
В то время как вы определенно должны позволить textarea сохранять функцию изменения размера при общих обстоятельствах, вы можете ограничить ее только вертикальным изменением размера, чтобы предотвратить разрыв макета из-за того, что пользователь, например, перетаскивает его очень широко.
Мы применим это свойство, применив наш класс .input , когда он применяется к текстовой области :
textarea.input {
изменение размера: вертикальное;
} Попробуйте это в последней демоверсии CodePen!
: focus State Styles #
Хорошо, мы завершили начальные стили для наших полей ввода и текстового поля, но нам нужно обработать очень важное состояние: : focus .
Мы собираемся использовать комбинированный эффект, который изменяет цвет границы на значение, которое соответствует контрасту 3: 1 по сравнению с несфокусированным состоянием, но также добавляет тень box-shadow для небольшого дополнительного выделения.
И вот почему мы определили цвет нашей темы состояния фокуса в hsl: это означает, что мы можем создать вариант цвета границы, обновив только значение яркости.
Сначала мы определяем цвет границы, создавая полное значение hsl из отдельных значений переменных CSS:
.input: focus {
border-color: hsl (
var (- input-focus-h),
var (- input-focus-s),
var (- input-focus-l)
);
} Затем мы добавляем box-shadow , который будет использовать размытие только для создания эффекта двойной границы. calc () допустимо для использования внутри hsla , поэтому мы используем его, чтобы уменьшить исходное значение на 40%, а также допустить небольшую альфа-прозрачность:
.input: focus {
box-shadow: 0 0 0 3px
hsla (
var (- input-focus-h),
var (- input-focus-s),
calc (var (- ввод-фокус-l) + 40%),
0.8
);
} Обратите внимание, что теперь мы добавили новый контекст для нашего контраста, который представляет собой границу : focus и : focus box-shadow , поэтому убедитесь, что вычисленная разница для выбранных вами цветов составляет не менее 3: 1 при использовании этого метода.
При желании вернитесь к правилу .input и добавьте переход для анимации тени блока :
.input {
переход: 180 мс вставка-тень на выходе;
} Наконец, мы не хотим забывать о режиме высокой контрастности Windows, который не будет видеть box-shadow и не сможет обнаружить изменение цвета границы.Итак, мы добавляем прозрачную схему для этих пользователей:
.input: focus {
контур: 3px сплошной прозрачный;
} Мы также используем эту технику в эпизоде, посвященном стилям кнопок.
Вот GIF-демонстрация фокусировки на вводе текста:
А вот внешний вид поля только для чтения , поскольку у него другой стиль границы :
В коде CodePen HTML есть комментарий с примером использования встроенного стиля для определения обновленного визуального элемента, например, для состояния ошибки.Опять же, имейте в виду, что мы делаем , осветляя предоставленное значение --input-focus-l на 40%, и цвет границы в фокусе должен быть не менее 3: 1 контрастности с несфокусированным цветом, поэтому учтите, что при изменении значений переменных CSS.
Режим ввода и автозаполнение #
Есть два дополнительных атрибута, которые могут помочь улучшить взаимодействие с пользователем, особенно на мобильных устройствах, в дополнение к использованию правильного типа ввода (например, электронная почта).
Первый определяет режим ввода , который обеспечивает измененную клавиатуру или клавиатуру, которая лучше соответствует ожидаемым данным.Прочтите доступные значения режима ввода на MDN>
Второй - это автозаполнение , которое имеет гораздо больше параметров, чем на или на . Например, я всегда ценю то, что на iPhone, когда Google отправляет мне текстовый код подтверждения, клавиатура «просто знает», что это за значение. Оказывается, это благодаря autocomplete = "одноразовый код" !
Ознакомьтесь с полным списком значений автозаполнения , которые позволяют вам намекнуть на ожидаемое значение и действительно повысить удобство использования ваших форм для пользователей, которые используют значения автозаполнения.
Демо #
Во-первых, вот последний взгляд на наше решение в Chrome, Safari и Firefox (слева направо). Ввод файла по-прежнему немного выделяется при просмотре рядом, но в потоке формы в отдельном браузере это определенно приемлемо.
Вот решение со всеми представленными нами типами полей.
Стефани Эклс (@ 5t3ph)
красивая форма «Блокнот веб-дизайнера
Формы
не должны быть уродливыми и скучными, и, конечно же, не обязательно находиться внутри таблиц, чтобы выглядеть красиво и согласованно.
В этом посте мы рассмотрим, как создать красивую форму, используя возможности семантического HTML и CSS.
Начало: разметка HTML
Начнем с создания простой формы обратной связи. Вот пример разметки для одного:
Разбивка разметки
Я использовал упорядоченный список, чтобы обернуть элементы формы, поэтому каждый элемент списка представляет собой пару для label + input / textarea .Это не только немного упростит добавление стиля к форме, но также улучшит внешний вид формы и сделает ее более понятной, если к ней не применяются стили.
Каждый элемент в форме имеет свою собственную метку (за исключением тех, значение которых указано в самом элементе, например button s и submit input s).
Возможно, вы ранее видели формы на других веб-сайтах, которые позволяют вам выбирать метки, в результате чего правильный ввод будет выделен.Это избавляет от необходимости указывать именно на поля ввода - разве это не удобнее для пользователя?
Для этого нужно определить, какая метка принадлежит какому входу (или textarea s, выберите s и т. Д.), И вы сделаете это с для атрибута (в метке s) в сочетании с атрибутами id во входе s.
При создании формы я не использовал теги fieldset или legend , потому что наша форма простая и короткая, поэтому нет смысла разделять ее более чем на один набор полей , и в абзаце объясняется, что форма предназначена для того, чтобы программы чтения с экрана не повторялись с каждой меткой (например, легенды ).
Также стоит отметить, что в этом примере я выбрал тег button вместо тега input для кнопки отправки. Это решение было принято, чтобы дать вам больше возможностей с точки зрения того, что вы можете с ним делать визуально.
Добавление стиля
Переходя к части формы CSS, мы начнем со сброса стилей по умолчанию, добавив некоторый стиль к нашему тегу формы - шрифт, фон, поля и отступы. Мы также добавим нижнее поле к нашему абзацу.
тело {
маржа: 0;
отступ: 0;
}
п {
маржа: 0 0 10px 0;
отступ: 0;
}
форма {
шрифт: 13px Georgia, Times New Roman, Times, с засечками;
фон: #eee;
маржа: 20 пикселей;
отступ: 10 пикселей 20 пикселей;
ширина: 330 пикселей;
}
Теперь давайте настроим упорядоченный список, а затем внесем некоторые изменения в тот, который содержит кнопку отправки (которому мы присвоили конкретный идентификатор id «отправить»).
form ol {
стиль списка: нет;
маржа: 0;
отступ: 0;
}
form li {
отступ: 6 пикселей;
фон: # e1e1e1;
нижнее поле: 1px;
}
form li # send {
фон: нет;
маржа сверху: 6 пикселей;
}
Наша форма сейчас обретает форму, но нам все еще нужно стилизовать метку s, вход s и текстовое поле .Мы также должны добавить другой стиль, когда наши входные данные находятся в фокусе.
form label {
плыть налево;
ширина: 70 пикселей;
выравнивание текста: вправо;
поле справа: 7 пикселей;
цвет: # 0066CC;
высота строки: 23 пикселя; / * Это сделает метки вертикально центрированными с входами * /
}
ввод формы,
form textarea {
отступ: 4 пикселя;
шрифт: 13px Georgia, Times New Roman, Times, с засечками;
граница: 1px solid # 999999;
ширина: 200 пикселей;
}
ввод формы: фокус,
form textarea: focus {
граница: 1px solid # 666;
фон: # e3f1f1;
}
И последнее, но не менее важное: давайте добавим глазных конфет кнопке "Отправить":
form li # кнопка отправки {
фон: # 003366 url (images / css-form-send.gif) no-repeat 8px 50%;
граница: нет;
отступ: 4px 8px 4px 28px;
радиус границы: 15%; / * Не ожидайте, что это сработает в IE6 или 7 * /
-moz-border-radius: 15%;
-webkit-border-radius: 15%;
цвет: #fff;
маржа слева: 77 пикселей; / * Общая ширина этикеток + их правое поле * /
курсор: указатель;
}
form li # кнопка отправки: hover {
цвет фона: # 006633;
}
Итак, что мы добавили на этом последнем шаге? Мы изменили границу по умолчанию ( граница ), цвет фона ( фон ) и цвет текста ( цвет ) кнопки в соответствии с нашими потребностями.Мы также добавили отступ, чтобы дать тексту пространство для дыхания, и дополнительный отступ слева, чтобы добавить небольшой значок на заднем плане.
Свойства border-radius , -moz-border-radius и -webkit-border-radius - это свойства CSS3, которые добавляют закругленные углы к нашему элементу. Поскольку свойство border-radius до сих пор широко не реализовано в браузерах, мы также должны использовать специфические свойства браузера, которые заставят его работать в Firefox ( -moz-border-radius ) и Safari ( -webkit-border -радиус ).Как вы уже догадались, ни одна из доступных версий Internet Explorer не поддерживает эту функцию, поэтому это будет дополнительная деталь для более совместимых браузеров.
Чтобы кнопка была хорошо выровнена с другим входом s, мы должны добавить 77 пикселей левого поля (что является суммой 70 пикселей меток + 7 пикселей для их правого поля).
Курсор : бит указателя на самом деле не нужен, но тогда мы позаботимся о том, чтобы при наведении курсора на кнопку курсор изменился на стрелку.Для браузеров, отличных от IE6, он также изменит свой цвет на зеленый (благодаря свойству формы li # send button: hover ).
Заключение
Когда дело доходит до создания форм, вы можете сделать гораздо больше вещей, чем кажется на первый взгляд, просто используя простой CSS. Моя цель в этом сообщении в блоге состояла в том, чтобы показать, что нет необходимости использовать таблицу для создания визуально привлекательных и удобных форм. Особенно, когда мы можем так же легко получить семантически правильную и красивую форму с помощью всего нескольких строк CSS и некоторых дополнительных крючков в вашей разметке.
Посмотреть пример [download id = ”5 ″]
P.S .: Не забудьте отдать должное famfamfam (если вы его используете) за красивый значок кнопки «Отправить», который является частью набора значков Silk.
Чао!
Дополнительная литература:
.
Добавить комментарий