Оформление Input type=»text»
Здравствуйте, возможно ли сменить оформление текстового поля input? Если это возможно, подтолкните в нужное направление. Смотрел в Googl`e, ни чего внятного не нашел. Спасибо.
Отслеживать
задан 13 июл 2012 в 23:17
111 2 2 золотых знака 2 2 серебряных знака 5 5 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Лучше будет учесть все
input[type="text"] < border: 1px solid #cccccc; //цвет рамки border-radius: 3px; //закругление углов (общее) -webkit-border-radius: 3px; //закругление углов (Google Chrome) -moz-border-radius: 3px; //закругление углов (FireFox) -khtml-border-radius: 3px; //закругление углов (Safari) background: #ffffff !important; // желательно прописывать, так как в Chrome при сохранных данных оно может быть желтым outline: none; // удаляет обводку в браузерах хром(желтая) и сафари(синяя) height: 24px; // высота на свое усмотрение width: 120px; // ширина на свое усмотрение color: #cccccc; //цвет шрифта в обычном состоянии font-size: 11px; // Размер шрифта font-family: Tahoma; // Стиль шрифта >Можно также добавить стиль при на нажатии(фокусе) на поле
input[type="text"]:focus
input[type="text"] не обязательно можно просто
input тогда свойство будет применено для всех инпатов.
Стилизация форм
При помощи CSS можно качественно улучшить внешний вид HTML форм:
Стилизация полей ввода
Для определения ширины поля ввода можно использовать свойство width :
input
В приведенном выше примере стили будут применяться ко всем элементам . Если же вам нужно настроить стили для поля ввода определенного типа, то вы можете использовать селекторы атрибутов:
- input[type=text] — выберет только текстовые поля ввода
- input[type=password] — выберет только поля ввода паролей
- input[type=number] — выберет только цифровые поля ввода
- и так далее..
Промежутки у полей ввода
Чтобы добавить дополнительные промежутки внутри поля ввода, используйте свойство padding .
Когда в форме много полей ввода, идущих друг за другом, также может потребоваться использовать свойство margin , чтобы добавить дополнительные отступы снаружи поля ввода:
Ваше имя Ваша фамилия
input[type=text]
Обратите внимание, что мы установили для свойства box-sizing значение border-box . Это сделано для того, чтобы промежутки и рамки включались в ширину и высоту элементов.
Поля ввода с рамкой
Чтобы изменить цвет и размер рамки поля ввода, используйте свойство border . Для добавления закругленных углов, используйте свойство border-radius :
input[type=text]
Если вы хотите, чтобы рамка была только снизу поля ввода, то используйте свойство border-bottom :
input[type=text]
Цветные поля ввода
Чтобы добавить фоновый цвет для поля ввода, используйте свойство background-color . Чтобы изменить цвет текста в поле ввода, используйте свойство color :
input[type=text]
Поля ввода в фокусе
По умолчанию, некоторые браузеры добавляют синюю внешнюю рамку вокруг поля ввода, когда оно получает фокус (пользователь кликает на него). Вы можете убрать такое поведение добавив для поля ввода свойство outline: none; .
Чтобы определить какой-нибудь свой стиль для поля ввода, находящегося в фокусе, используйте псевдокласс :focus :
input[type=text]:focus
input[type=text]:focus
Поле ввода с иконкой/изображением
Если вы хотите внутри поля ввода разместить иконку, то используйте свойство background-image . Позиционировать ее можно при помощи свойства background-position . Также, обратите внимание, что мы добавляем большой отступ слева, чтобы зарезервировать место для иконки:
input[type=text]
Анимированное поле ввода
В следующем примере мы используем свойство transition , чтобы добавить анимацию на изменение ширины поля ввода, когда оно получает фокус:
input[type=text] < transition: width 0.4s ease-in-out; >input[type=text]:focus
Стилизация области ввода
Чтобы запретить изменять размер области текстового ввода (отключить «захват» в левом нижнем углу), используйте свойство resize :
textarea
Стилизация меню выбора
select
Стилизация кнопок ввода
input[type=button], input[type=submit], input[type=reset]
Чтобы ширина кнопки была во весь экран, используйте width: 100%; .
Изменить input и стиль текста
Как изменить стиль label, внутри которого input, средствами CSS?
Крутил-вертел, только стиль самого чекбокса получается зацепить при :checked. HTML поменять никак.
Как изменить стиль текста?
У меня есть основной кликабельный текст с черным цветом,а другой текст я хочу сделать зеленым.
Изменить цвет текста для disabled input в IE8
Есть страница, в упрощенном виде код выглядит так<html> <body> <input >
Изменить стиль текста из кода
Есть TextViev: . <TextView style="@style/MyStyle1" android:id="@+id/MyTextView".
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Назначайте стили классам
Регистрация: 02.04.2016
Сообщений: 102
mrtoxas,сделал вот так но повился изменённый интпут под стандартным. Если убрать стандартный то видно что новый интпут выполнен как картинка не реагирует на нажатия и тд
1 2 3 4 5 6 7 8 9 10 11
Ваше Имя: br /> p class="cite"> input type="text" name="name" required>/p> Ваша Фамилия: br /> input type="text" name="s_name" required/>br /> Ваш адрес: br /> input type="text" name="address" required/>br /> Почтовый индекс: br /> input type="text" name="post_index" required/>br /> Ваш e-mail: br /> input type="text" name="email" />br required/> /p>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
> P.cite { border: 1px solid #cccccc; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; background: white ; height: 24px; width: 120px; color: black; font-size: 11px; font-family: Tahoma; } >
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Сообщение было отмечено mrtoxas как решение
Решение
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Document/title> style> .form-input < /*Общий класс для всех инпутов*/ display: block; border: 2px solid red; >/*Отельные инпуты:*/ .form-input-name < color: green; >.form-input-surname <> .form-input-address <> .form-input-index <> .form-input-email <> /style> /head> body> form action="" id=""> label>Baше имя: input class="form-input form-input-name" name="name" type="text" required> /label> label>Baша фамилия: input class="form-input form-input-surname" name="surname" type="text" required> /label> label>Ваш адрес: input class="form-input form-input-address" name="address" type="text" required> /label> label>Почтовый индекс: input class="form-input form-input-index" name="post_index" type="text" required> /label> label>Ваш e-mail: input class="form-input form-input-email" name="post_email" type="text" required> /label> /form> /body> /html>
Стилизуем формы при помощи CSS: руководство для начинающих
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «How to style forms with CSS: A beginner’s guide».
Приложения получают данные от пользователей, в основном, через формы. Возьмем для примера обычную форму регистрации. Там всегда будет несколько полей, куда пользователь может ввести нужную информацию (свое имя, email и т. д.).
Раньше на сайтах были простые, скучные HTML-формы без всякой стилизации. Но с появлением CSS все изменилось. Благодаря новейшим свойствам CSS мы сейчас можем создавать куда более интересные и красивые формы.
И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.
А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.
В этом руководстве мы покажем вам, как воспроизвести такую форму, а также расскажем о нескольких модификациях, благодаря которым вы сможете создавать впечатляющие и дружественные к пользователю формы.
Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.
- Определение размеров формы (box-sizing).
- Селекторы CSS для элементов ввода (input).
- Базовые методы стилизации для текстовых полей ввода.
- Стилизация прочих полей ввода.
- Псевдоклассы UI.
- Элементы ввода, недоступные для кастомизации.
Прежде чем мы углубимся в нашу тему, важно понять, что нет никаких особенных стилей для форм. Ваши возможности в этом плане ограничены только вашим воображением. Это руководство лишь поможет вам начать создавать собственные уникальные варианты дизайна при помощи CSS.
1. Устанавливаем box-sizing
Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).
.some-class
Ширина .some-class без box-sizing:border-box будет больше 200px, что может стать проблемой. Поэтому большинство разработчиков используют border-box для всех элементов.
Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.
*, *:before, *:after
Совет: универсальный селектор * выбирает все элементы в документе.
2. Селекторы CSS для элементов ввода
Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.
input[type=text] < // input elements with type="text" attribute >input[type=password] < // input elements with type="password" attribute >
Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:
.signup-text-input < // styles here >
3. Базовые методы стилизации для однострочных текстовых полей ввода
Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).
Вот HTML-разметка для однострочного текстового поля с плейсхолдером.
Выглядеть это будет так:
Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:
- Padding (внутренние отступы)
- Margin (внешние отступы)
- Border (граница)
- Box shadow (тень блока)
- Border radius (для скругления границ)
- Width (ширина)
- Font (шрифт)
Давайте пройдемся по каждому из этих свойств.
Padding
Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.
input[type=text]
Margin
Если рядом с вашим полем ввода есть другие элементы, вы можете захотеть добавить внешний отступ, чтобы избежать слипания элементов.
input[type=text] < padding:10px; margin:10px 0; // add top and bottom margin >
Border
В большинстве браузеров текстовые поля ввода имеют границы, которые вы можете кастомизировать.
.border-customized-input
.border-removed-input
Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.
Некоторые веб-дизайнеры предпочитают оставлять только нижнюю границу. При таком варианте пользователь как бы будет писать на строчке, как в блокноте.
.border-bottom-input < border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border >
Box shadow
Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.
input[type=text]
Border radius
Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.
.rounded-input
Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.
Width
Используйте свойство width, чтобы установить ширину поля ввода.
input
Font
Большинство браузеров используют разные семейства шрифтов и размер шрифта для элементов форм. Если необходимо, можно установить наследование шрифта от документа.
input, textarea
4. Стилизация прочих типов полей ввода
Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.
Давайте рассмотрим подробнее каждое из них.
Текстовые области (text areas)
Текстовые области напоминают однострочные текстовые поля ввода, с той лишь разницей, что здесь пользователь может ввести не одну строку текста. Обычно они используются, если нужно принимать более «многословные» данные: комментарии, сообщения и т. п. Для стилизации этих областей вы можете использовать все свойства, о которых мы говорили ранее.
Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.
Посмотрите на пример:
Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.
Примечание: если вам нужно создать текстовую область с автоматическим изменением размера, следует использовать JavaScript. Но в нашей статье мы не будем углубляться в эту тему.
Чекбоксы и радиокнопки
Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).
Для стилизации чекбокса используйте следующий HTML-код.
Несколько вещей, на которые нужно обратить внимание:
- Поскольку мы используем в качестве обертки для , если вы кликнете на любой элемент внутри , «кликнутым» будет .
- Мы спрячем , потому что браузеры практически не позволяют нам его модифицировать.
- создает пользовательский чекбокс.
- Чтобы получить положение «отмечено» и стилизовать пользовательский чекбокс, мы будем использовать псевдокласс input:checked.
Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):
See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.
Вот пользовательская радиокнопка:
See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.
В обоих примерах мы использовали одну и ту же концепцию (input:checked).
В браузерах чекбоксы отображаются квадратиками, а радиокнопки — кружочками. Это лучше не менять, чтобы не путать пользователя.
Раскрывающийся список
Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.
Вы можете стилизовать элемент , чтобы он выглядел более привлекательно.
select
Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.
Кнопки
Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.
Давайте немного украсим нашу кнопку.
button < /* remove default behavior */ appearance:none; -webkit-appearance:none; /* usual styles */ padding:10px; border:none; background-color:#3F51B5; color:#fff; font-weight:600; border-radius:5px; width:100%; >
5. Псевдоклассы UI
Ниже приведен список псевдоклассов, которые широко используются с элементами форм.
Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:
- :required
- :valid и :invalid
- :checked (этим мы уже пользовались)
Эти могут использоваться для создания эффектов для каждого состояния:
Сообщения, генерируемые при помощи :required
Показываем сообщение о том, что заполнение поля является обязательным:
Name Email label < display:block; >input:required + span:after
Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.
Примечание: не может содержать другие элементы. А значит, и псевдоэлементы :after или :before. Поэтому нам нужно использовать другой элемент — .
Мы можем сделать то же самое с псевдоклассами :valid и :invalid.
:hover и :focus
:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.
Эти псевдоклассы часто используются для создания переходов и легких визуальных изменений. Например, можно менять ширину, цвет фона, цвет границы, густоту тени и т. п. Если вместе с этими свойствами использовать свойство transition, изменения будут более плавными.
Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):
See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.
Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.
Вы замечали, что в некоторых браузерах вокруг элемента, находящегося в фокусе, появляется синяя внешняя граница? Вы можете использовать псевдокласс :focus, чтобы удалить ее и добавить другие эффекты для элемента в фокусе.
Следующий код удаляет внешнюю границу для всех элементов:
*:focus
Добавляем внешнюю границу для элементов в фокусе:
input[type=text]:focus < background-color: #ffd969; border-color: #000; // and any other style >
6. Элементы ввода, недоступные для кастомизации
Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:
Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.
Например, чтобы стилизовать , мы можем спрятать дефолтный input и использовать пользовательскую кнопку.
Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.
Заключение
К этому моменту у вас уже должно появиться понимание того, как стилизуются простые элементы форм и как использовать кастомные контролы для стилизации остальных элементов. Конечно, это лишь основные строительные блоки, при помощи которых вы можете создавать стили, рисуемые вашим воображением.
В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.