Добавьте класс .am-input-group в контейнер и добавьте класс .am-input-group-label в метку. Подробнее см. ниже.
Следующий код показывает, как использовать значки и текст в качестве меток.
.00
$ .00
<дел>
Использовать радио/флажок в .am-input-group-label .
<дел>
<дел>
<дел>
<диапазон>
<тип ввода="флажок">
<тип ввода="текст">
Используйте . вместо 
am-input-group-btn .am-input-group-label .
<дел>
<дел>
<дел>
<диапазон>
<тип ввода="текст">
<дел>
<дел>
<тип ввода="текст">
<диапазон>
Добавьте .am-input-group-lg или .am-input-group-sm к .am-input-group .
<дел> @ <дел> @ <дел> @
<дел> <дел> ... <дел> ... <дел> ... <дел> ...
При изменении цвета кнопок нам нужно изменить стиль как кнопки, так и контейнера.
<дел>
<дел>
<дел>
<диапазон>
<тип ввода="флажок">
<тип ввода="текст">
<дел>
<дел>
<диапазон>
<тип ввода="текст">
Простой, но современный вид полей ввода текста. Протестировано и работает в Google Chrome, Safari, Safari iOS и Firefox.
Автор: Александр Эрландссон (Алексирлендссон)
Ссылки: Исходный код / демонстрация
Создано: Fembruary
. input, label, form, login, text
Автор: Аарон Икер (aaroniker)
Ссылки: Исходный код / Демо
Август
9 Создано: 5 , 2019Сделано с: HTML, SCSS, JS
Поля материалов входного текстаАвтор: FATMA (Fatmali)
Ссылки: . 14, 2019
Сделано с: HTML, CSS
Сделано с помощью: HTML, CSS
Автор: Fidalgo (fidalgodev)
Ссылки: Исходный код / Демо
Дата создания: 9 декабря 2018 г.
Сделано с помощью: HTML, CSS
Проверка формы с использованием атрибутов HTML required и шаблона вместе с селекторами CSS:required и :valid. Дизайн вдохновлен работами Олега Фролова на дриббле: https://dribbble.com/shots/3072293-Notify-me
Автор: bertdida (bertdida)
Ссылки: Исходный код / Демо, Dribbble Shot
6
6 Дата создания: 15 октября 2018 г.
Сделано с помощью: HTML, SCSS, JS
Теги: кнопка, электронная почта, форма, подписка, переключатель
Storm5 : (andreasstorm)
Ссылки: Исходный код / Демо
Создано: 20 июля 2018 г.
Сделано с: HTML, Stylus
5 8. Ввод :notВходные материалы с плавающей материалом с: not (: shound)
Автор: Andreas Storm (Andreasstorm)
Ссылки: Source Code / Demo
Создано на: июнь 15,
. with: HTML, Sass
Теги: :placeholder-show, input, :not(:empty), input empty, material input
Ссылки: Исходный код / Демо
Создано: 24 января 2018 г.
Сделано с: HTML, CSS
Автор: Rik Schennink (rikschennink)
Ссылки: Исходный код / Демо
Создано: 12 декабря 2016 г.
Теги: ввод, градиент, граница, фокус, веселье
Подход только с помощью CSS к шаблону пользовательского интерфейса с плавающими метками
: Nick Salloum (callmenick)Ссылки: Исходный код / Демо
Создано: 27 сентября 2017 г.
Сделано с: HTML, SCSS 9094, Babel095 css, floated, labels, transitions, transforms
12. Анимация полей с пользовательскими свойствами CSS
Автор: Стас Мельников (melnik909)
Ссылки: Исходный код / Демо
90d , 2017
Сделано с: HTML, CSS
Теги: полей, пользовательские свойства, пользовательский интерфейс, веб-дизайн, css
13. Поле ввода с подчеркиванием под каждым символом
Создано, чтобы ответить на ТАК вопрос.
Подробнее
Автор: Ana Tudor (thebabydino)
Ссылки: Исходный код / Демо
Создано: 17 января 17, 9, 150026
Сделано с: HTML, SCSS
14. Поле ввода электронной почты
Автор: Дин Хидри (VisualCookie)
Ссылка: Sounder / Demo, Dribbble Shot
. , 2016Сделано с помощью: HTML, SCSS
Теги: кнопка, ввод, форма, электронная почта
15. Анимация ввода текста/пароля CSS3
Автор: braydeneoncha0026
Links: Source Code / Demo
Created on: June 8, 2016
Made with: HTML, SCSS
16.
Super easy and fully scalable Material Design форма ввода. Измените одну переменную, чтобы изменить размер всего.
Автор: Кайл Лавери (kylelavery88)
Ссылки: Исходный код / Демо
Создано: 3 декабря 2015 г.
Сделано с: PUG, SCSS
CSS Preprocessor: SCSS
JS Preprocessor:
HTMLML:
HTMLML:
HTMLML:
. material design, sass
17. Входные данные только для CSS
Поля ввода в стиле Material Design. Скоро добавлю больше типов ввода 🙂
Автор: Льюис Робинсон (lewisvrobinson)
Links: Source Code / Demo
Created on: June 24, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: Нет
Препроцессор HTML: Мопс
Теги: материальный дизайн, стиль ввода, только css, проверка формы
стилей, основанных на родственных селекторах и псевдоклассах.
Автор: Andrew Tunnecliffe (Atunnecliffe)
Ссылки: Исходный код / демонстрация
Создано: 14 июля 2015 г.
. , psuedo-class, sibling-selector, form, wcag
Автор: Бен Милдрен (mildrenben)
Ссылки: Исходный код / Демо
Дата создания: 9 марта 2015 г.
Сделано с помощью: HTML, SCSS
CSS-эксперимент по воссозданию полей ввода Google Material Design Polymer в CSS. Учебное пособие здесь: Scotch.io
Автор: Chris on Code (ChrisonCode)
Ссылки: Исходный код / демонстрация
Созданы на: 9009,
.
Теги: Дизайн материала, CSS, формы
Причудливые текстовые входыИспользование требуемого взлома
Автор: Алекс Бергин (Abergin)
Links: Souce Code / Demo. Дата создания: 8 июня 2014 г.
Сделано с помощью: HTML, Sass
Теги: css, формы, ввод, html
Автор: Дэнни Кинг (Дэнникингм)
Ссылки: Исходный код / демонстрация
Создано: 26 апреля 2014 г.
Сделано с: HAML, LTER
PRED: HAML, MTER
PRED: HAML, MTER
. : Меньше
Препроцессор JS: Нет
Препроцессор HTML: Haml
Теги: адаптивный, заполнитель, ввод, метка
903 Ввод 90 Text035 23. Я хотел поиграть с некоторыми стилями ввода, которые не полагаются на наведение курсора, не добавляют беспорядка, постоянно отображают метку и отображают текст-заполнитель, когда он действительно уместен.
Автор: Michael Arestad (MichaelArestad)
Ссылки: Исходный код / демонстрация
Создано: 8 августа 2013
. , css, Effective, text-input
Простая текстовая коробка с анимацией на фокусе
Автор: Aditya Bhandari (Takeradi)
Ссылки: Исходный код / Демо
Созданы: марта 1,
. HTML, SCSS
Теги: pure-css, textbox, css
Посмотрите пошаговое руководство на Youtube — https://www .youtube.com/watch?v=dok2xAaheWk
Автор: YOR (Yorsaquing)
Ссылки: исходный код / демонстрация
Создано: , 25 августа, 2020
, изготовленные с: HTML, SCSSS
.
Форма, вход, CSS, HTML
Автор: Ахмет Аксангур (Ахметаксунгур)
Ссылки: исходный код / Демо
Созданы: , 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27, 2020 27,
.0025 Сделано с: HTML, CSS
Теги: aks, input, radio, button, checkbox
Автор: savwiley (savwiley) (savwiley) Код:
90 90 ДемоСоздано: 20 августа 2020 г.
Сделано с: HTML, CSS
Теги: кнопка, поле, пароль, ввод
от Рубена Варданьяна
Автор: Рубен Варданьян (Рубен-Варданьян)
Ссылки: Исходный код / Демо
Сделано: 11, 2020269
.
CSS
Теги: анимация, ввод, кнопка, вводы, градиентная граница
простая группа ввода с помощью кнопки ввода текста, выбора опции и кнопки
Author: Fauzan Ahmad (_fauzanahmad_)
Links: Source Code / Demo
Created on: August 9, 2020
Made with: HTML, CSS
Tags: select , кнопка, ввод, css, анимация
Автор: UbaidRussell (УбайдРассел)
Ссылки: Исходный код/Демо
Создано на:0095 27 июля 2020 г.
Сделано с: HTML, CSS
Теги: Hover, Input, Icon, Focus, Effect
Автор: Alexommers Alexomers (A. Alexomers (A Aleabommers (A Aleabommers (A Aleabommers (A Alemmers (A Alexommers (A Alebomers Alexomers (A Alemmers (A Alemmers Asommers (A Aleabomers Alexomers (A Aleabomers Alexomers (A Alexommers Asommers.
Ссылки: Исходный код / Демо
Создано: 18 июля 2020 г.
Сделано с: HTML, SCSS
Теги: neumorphic, Inputs 3. Каретный прыжок
Анимация ввода при поиске, в которой ручка увеличительного стекла отлетает, становится кареткой и устанавливается в поле.
Автор: Джон Кантнер (Jkantner)
Ссылки: Исходный код / демонстрация
Создано: 21 июля, 2020
Сделано с: HTML, CS 2
. , ввод, поиск, текстОбновленный экран входа в систему CMS WordPress с линейно-градиентным фоном. Логотип скопирован из Википедии и перекрашен прямо здесь ручкой. https://upload.wikimedia.org/wikipedia/commons/0/09/ WordPress-logo.svg
Автор: Håvard Brynjulfsen (Havardob)
Ссылки: Source Code / Demo
Созданы: апрель 29, 2020
.
Попробуйте удалить и написать что-нибудь еще в поле ввода. Он использует модуль ch, ширина которого равна ширине символа 0. Также предполагается, что шрифт в поле ввода является моноширинным, так что все символы имеют одинаковую ширину. Итак, ширина для каждого…
Minimal Material Design Form Input
Только CSS и совместимость с WCAG 2.0 AA!