Красивые css input (поля ввода)
( 0 — user rating )
Данная статья посвященна тому, как с помощью одного лишь 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;
}
<input type=»text» />
Как видите, мы указали основные 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;
}
<input type=»text» />
Вот теперь, если ввести текст, то все выглядит хорошо.
Как Вы могли заметить, по сравнению с первым вариантом 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;
}
<div class= «left-input»>
<div class= «right-input»>
<div class= «fill-input»>
<input type=»text» />
</div>
</div>
</div>
Примечание:
В приципе все должно быть понятно, но хотелось бы остановится на некоторых моментах:
.
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. У каждого из способов есть свои плюсы и минусы, но для создания красивых форм без использования криптов эти способы наиболее оптимальные.
Обнуление стилей
Не оставляйте браузеру возможности отображать элементы интерфейса так, как этого «хочется» ему — описывайте стили сами!
Браузер задает HTML элементам оформление по-умолчанию
Начинающие верстальщики бывают двух видов:
— одни знаю о понятии reset.
css и используют его бездумно,
— другие не знают о нем и много мучаются, пытаясь переопределить браузер по мере поступления проблем со стилями.
Действительно, проблему можно долго игнорировать. Но только до тех пор, пока не становится важно сделать «pixel perfect», т.е. чтобы дизайн и верстка были практически идентичны по взаимному расположению элементов.
Обнуление
Проблема заключается в том, что все браузеры имеют те или иные дефолтные значения (значения, используемые по-умолчанию) для отображения HTML-элементов. При этом не для всех браузеров эти значения одинаковы. Например, отступы списков (<ul>) в одних браузерах могут быть реализованы с использованием margin, а в других — с помощью padding. Также частенько доставляют неудобства различные отступы параграфов (<p>), различие наличия/отсутствия границ у некоторых элементов, ну и, конечно же, совершенно разные стили заголовков (<h2>-<h6>).
Самый простой способ быстро избавиться от проблем с отступами:
* { margin: 0; padding: 0; }Однако эта деректива обнуляет отступы сразу всех(!) элементов.
Не говоря уже об анти-паттерне «звездочка».
Лучше использовать точечный подход к элементам:
html, body, h2, h3, h4, h5, h5, h6, div, span, p, pre, hr, em, strong, b, i, a,
acronym, applet, address, dfn, tt, var, kbd, samp, ruby,
blockquote, q, cite, ins, del, s, strike, u, sub, sup, big, small, abbr, center,
table, tr, th, td, caption, thead, tbody, tfoot,
form, input, label, textarea, button, fieldset, legend, select, canvas,
article, section, footer, header, main, hgroup, nav, aside, audio, video,
details, summary, menu, output, figure, figcaption, time, mark,
ul, ol, li, dl, dt, dd, code, img, iframe, object, embed { margin: 0; padding: 0; }
Как видите, мы перечисляем все необходимые элементы. Таким образом мы всегда можем отменить обнуление для конкретного элемента.
Следующим ходом будет точечная отмена границ:
img, fieldset { border: 0; }У картинок (<img>) возникают неприятные границы, когда картинка является ссылкой.
У <fieldset> границы могут где-то быть, а где-то не быть по-умолчанию, потому явно определяем и его.
Нормализация
Следующая проблема — различие размеров шрифтов.
Вечный спор между px, em и rem оставим в стороне. В большинстве случаев я использую «px». Итак, задаем базовой правило вроде такого:
body { font: 16px/1.4 Arial, Verdana, Tahoma, sans-serif; }Обратите внимание, что значение line-height указано безразмерным
Также можно сразу задать базовые размеры для h2-H6 (хотя обычно используются только h2-h4):
h2 { font-size: 20px; }
h3 { font-size: 15px; }
h4 { font-size: 12px; }
UL/OL.
Не рекомендую прописывать list-style: none; для списков (<ul>, <ol>, <li>), т.к. это сильно затруднит использовании обычных списков на страницах.
Представьте, человек наполняет страницу через «визивик», делает маркированный список, а он на странице он отображается без маркеров. Неприятно.
Лучше прописать нормальный вид спискам по-умолчанию и отменять маркеры и отступы в тех структурах, где вам это необходимо. Итого:
li { margin-left: 25px; }IMG. Важно не забыть ограничить картинку пределами контейнера:
img { max-width: 100%; }Этого достаточно, чтобы маркеры (нумерованные и ненумерованные) отображались примерно одинаково во всех браузерах.
Можно добавить кое-что и для форм:
input, label, select { vertical-align: middle; }
textarea { vertical-align: top; }
button { cursor: pointer; -webkit-appearance: button; }
button[disabled], input[disabled] { cursor: default; }
Итого
Мой вариант reset+notmalize:
html, body, h2, h3, h4, h5, h5, h6, div, span, p, pre, hr, em, strong, b, i, a,
acronym, applet, address, dfn, tt, var, kbd, samp, ruby,
blockquote, q, cite, ins, del, s, strike, u, sub, sup, big, small, abbr, center,
table, tr, th, td, caption, thead, tbody, tfoot,
form, input, label, textarea, button, fieldset, legend, select, canvas,
article, section, footer, header, main, hgroup, nav, aside, audio, video,
details, summary, menu, output, figure, figcaption, time, mark, embed,
ul, ol, li, dl, dt, dd, code, img, iframe, object { margin: 0; padding: 0; }
article, section, aside, footer, header, hgroup, main, nav,
menu, details, summary, figure, figcaption { display: block; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { font: 16px/1.
4 Arial, sans-serif; color: #000; background: #fff; }
a { color: #0081FF; text-decoration: underline; cursor: pointer; }
a:hover { text-decoration: none; }
h2 { font-size: 26px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }
h5 { font-size: 12px; }
h2, h3, h4, h5 { line-height: 1.2; }
li { margin-left: 25px; }
b, strong { font-weight: bold; }
img { border: 0; max-width: 100%; }
hr { box-sizing: content-box; height: 0; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { text-align: left; padding: 0; }
sub, sup {
position: relative;
vertical-align: baseline;
font-size: 0.75em;
line-height: 1;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace; font-size: 1em; }
fieldset { border: 0; }
input { vertical-align: middle; }
input[type="text"],
input[type="email"],
input[type="tel"],
textarea { -webkit-appearance: none; }
input[type="button"],
input[type="submit"],
input[type="reset"],
button { cursor: pointer; overflow: visible; -webkit-appearance: button; }
button[disabled], input[disabled] { cursor: default; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"] {
padding: 2px 6px;
border: 1px solid #787878;
background: #fff;
font: inherit; color: inherit;
}
textarea {
vertical-align: top;
padding: 3px 6px;
overflow: auto;
border: 1px solid #787878;
background: #fff;
font: inherit; color: inherit;
}
select {
vertical-align: middle;
border: 1px solid #787878;
background: #fff;
font: inherit; color: inherit;
}
input::-webkit-input-placeholder { color: #ccc !important; }
input::-moz-placeholder { color: #ccc !important; }
input:-ms-input-placeholder { color: #ccc !important; }
Если что-то лишнее (например, у вас не будет форм), выкидываете и используете остальное, поправив «нормализацию» под себя.
Существуют еще и другие дефолтные значения, которые лично я считаю либо излишними, либо достаточно спорными.. Наиболее известным является Reset.css Эрика Мейера.
Поле ввода CSS [15+ лучших примеров полей ввода HTML]
Привет, друзья, в этой статье мы узнаем , как создать поле ввода в HTML , а также я перечислил 15+ лучших отобранных вручную бесплатных HTML и CSS Поле ввода примеры кода. Ознакомьтесь с этим превосходным дизайном ввода, который доступен на CodePen.
Как создать поле ввода в HTML
Если мы хотим создать поле ввода в документе Html для вставки символов пользователем на веб-страницу, мы должны выполнить шаги, указанные ниже. Используя эти шаги, любой может создать поле ввода .
Шаг 1 — Создание нового проекта
На этом шаге нам нужно создать новую папку проекта и файлы ( index.html , style.css ) для создания поля ввода .
На следующем шаге вы начнете создавать структуру веб-страницы.
Шаг 2 — Настройка базовой структуры
На этом этапе мы добавим код HTML для создания базовой структуры проекта.
<голова>
<мета-кодировка="UTF-8">
Как создать поле ввода в HTML
<ссылка rel="preconnect" href="https://fonts.gstatic.com" перекрестное происхождение>
<тело>
Это базовая структура большинства веб-страниц, использующих HTML.
Добавьте в тег следующий код:
Шаг 3 — Добавление стилей для классов
На этом шаге мы добавим стили в класс раздела Внутри файла style.css
* {
семейство шрифтов: «Поппинс», без засечек;
заполнение: 0;
маржа: 0;
}
#Final Result
Вот различные типы ввода, которые вы можете использовать в HTML:<тип ввода="флажок"> <тип ввода="цвет"> <тип ввода="дата"> <тип ввода="электронная почта"> <тип ввода="файл"> <тип ввода="скрытый"> <тип ввода="изображение"> <тип ввода="месяц"> <тип ввода="число"> <тип ввода="пароль"> <тип ввода="радио"> <тип ввода="диапазон"> <тип ввода="сброс"> <тип ввода="поиск"> <тип ввода="отправить"> <тип ввода="тел"> <тип ввода="текст"> <тип ввода="время"> <тип ввода="ссылка">
Если Вы хотите больше узнать об HTML, вот полное руководство по HTML для начинающих
Что такое HTML?
youtube.com/embed/AsefY3Qn2qU?feature=oembed» frameborder=»0″ allow=»accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»> В этой коллекции я перечислил более 15 лучших полей ввода HTML, посмотрите на эти удивительные дизайны ввода, такие как: Коробка с анимацией ошибки пароля и многое другое.
#1 Текстовое поле Pure CSS 3D
Текстовое поле Pure CSS 3D, разработанное компанией Жуан Марсель . Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
| Автор : | Jouan Marcel |
| Создан на : | 17 декабря 2019 г. |
| с | |
| 9003. Made с | |
| 9003: | |
| 9003: | |
| Демо Ссылка : | Исходный код / Демо |
| Теги: | Текстовое поле Pure CSS 3D |
#2 Заполнитель Поле ввода текста
Заполнитель Поле ввода ввода текста, разработанное Michael Smart .
Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
| Автор : | Michael Smart | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Создан на : | 20 июля 2015 г. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .0004: | HTML, CSS (SCSS) и JS | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ДЕМО LINK : | Source Code / Demo | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Теги: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Теги: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| . Поле ввода с анимацией ошибки пароля Поле ввода с анимацией ошибки пароля, разработанное Himalaya Singh . Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
|
Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
#8 Поле ввода с анимацией проверки электронной почты
Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.
Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями. 
Мы также писали на похожие темы, такие как Best Collection of Search Box Design и многие другие. 
Папка проекта называется — Styling Color Input. Внутри этой папки у нас есть два файла — 
0" />
Мы также центрируем их по вертикали, используя 