I would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?
I have used this code:
input, textarea {
background-color: #d1d1d1;
}
Penny Liu
13.8k5 gold badges74 silver badges91 bronze badges
asked Apr 11, 2011 at 6:47
3D-kreativ3D-kreativ
8,88135 gold badges100 silver badges158 bronze badges
1
input[type="text"], textarea {
background-color : #d1d1d1;
}
Edit: working example, http://jsfiddle.net/C5WxK/
user
5,3076 gold badges19 silver badges35 bronze badges
answered Apr 11, 2011 at 6:50
Damien-WrightDamien-Wright
7,1364 gold badges27 silver badges23 bronze badges
6
The best solution is the attribute selector in CSS (input[type="text"]) as the others suggested.
But if you have to support Internet Explorer 6, you cannot use it (QuirksMode). Well, only if you have to and also are willing to support it.
In this case your only option seems to be to define classes on input elements.
<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...
and target them with a class selector:
input.input-box, textarea { background: cyan; }
answered Apr 11, 2011 at 6:54
You want to restrict to input fields that are of type text so use the selector input[type=text] rather than input (which will apply to all input fields (e.g. those of type submit as well)).
answered Apr 11, 2011 at 6:50
Eric ConnerEric Conner
10.2k5 gold badges49 silver badges65 bronze badges
you can simply use the button tag with type=»submit»
<button type="submit">Submit</button>
besides solving your problem, now you can put HTML inside it(icons for example), rather than using the value attribute to set the text.
If you need to insert a normal button inside a form, use type=»button» to prevent it submitiing the form
answered Jan 27 at 20:27
I would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?
I have used this code:
input, textarea {
background-color: #d1d1d1;
}
Penny Liu
13.8k5 gold badges74 silver badges91 bronze badges
asked Apr 11, 2011 at 6:47
3D-kreativ3D-kreativ
8,88135 gold badges100 silver badges158 bronze badges
1
input[type="text"], textarea {
background-color : #d1d1d1;
}
Edit: working example, http://jsfiddle.net/C5WxK/
user
5,3076 gold badges19 silver badges35 bronze badges
answered Apr 11, 2011 at 6:50
Damien-WrightDamien-Wright
7,1364 gold badges27 silver badges23 bronze badges
6
The best solution is the attribute selector in CSS (input[type="text"]) as the others suggested.
But if you have to support Internet Explorer 6, you cannot use it (QuirksMode). Well, only if you have to and also are willing to support it.
In this case your only option seems to be to define classes on input elements.
<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...
and target them with a class selector:
input.input-box, textarea { background: cyan; }
answered Apr 11, 2011 at 6:54
You want to restrict to input fields that are of type text so use the selector input[type=text] rather than input (which will apply to all input fields (e.g. those of type submit as well)).
answered Apr 11, 2011 at 6:50
Eric ConnerEric Conner
10.2k5 gold badges49 silver badges65 bronze badges
you can simply use the button tag with type=»submit»
<button type="submit">Submit</button>
besides solving your problem, now you can put HTML inside it(icons for example), rather than using the value attribute to set the text.
If you need to insert a normal button inside a form, use type=»button» to prevent it submitiing the form
answered Jan 27 at 20:27
Как изменить цвет текста и фона в текстовом поле?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Установить цвет фона и текста для однострочного текстового поля формы.
Решение
Цвет фона элемента задается стилевым свойством background-color, а цвет текста с помощью color, эти свойства необходимо добавить к селектору INPUT. Поскольку тег <input> является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.
Пример 1. Цвет текста и фона в текстовом поле
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет текста и фона</title>
<style>
.colortext {
background-color: #ffe; /* Цвет фона */
color: #930; /* Цвет текста */
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p><input type="text" class="colortext">
<input type="submit" name="Submit" value="Послать"></p>
</form>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля после добавления к нему стилей
В данном примере добавляется новый класс с именем colortext, он добавляется к тегу <input> с помощью конструкции class=»textfield».
Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу <input> в этом случае всегда добавляется атрибутtype. Используя запись INPUT[type=»text»] задаем стиль для всех элементов <input>, но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).
Пример 2. Использование селекторов атрибутов
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет фона и текста в поле</title>
<style>
INPUT[type="text"] {
background-color: navy;
color: #ffe;
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p><input type="text">
<input type="submit" name="Submit" value="Послать"></p>
</form>
</body>
</html>В этой статье рассмотрим различные варианты стилизации текстовых полей HTML-форм. Сначала создадим базовый вариант оформления input, а затем множество других, дополняя каждый из них небольшим количеством CSS.
Введение
Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.
Веб-формы также часто называют HTML-формами. Их проектирование осуществляется с помощью элементов управления форм (текстовых полей, выпадающих списков, кнопок, чекбоксов и т.д.) и некоторых дополнительных элементов, которые используются для придание форме определённой структуры.
Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей.
Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».
Нормализация стилей
1. Настройка box-sizing.
Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box:
*, *::before, *::after {
box-sizing: border-box;
}
В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.
2. Нормализация стилей <input>.
Для того чтобы <input> в разных браузерах отображался как можно более одинаково необходимо добавить следующее:
/* 1 – Изменим стили шрифтов */
/* 2 – Удалим margin в Firefox и Safari */
input[type="text"] {
font-family: inherit; /* 1 */
font-size: inherit; /* 1 */
line-height: inherit; /* 1 */
margin: 0; /* 2 */
}Базовый вариант оформления input
Для удобного добавления к элементам стилей создадим следующую HTML-разметку:
<div class="text-field">
<label class="text-field__label" for="login">Логин</label>
<input class="text-field__input" type="text" name="login" id="login" placeholder="Login" value="itchief">
</div>Т.е. добавим к <input> с type="text" класс text-field__input, к <label> – text-field__label, а затем обернём их в элемент <div> с классом text-field.
Теперь напишем стили для этих элементов. А также сразу включим в них стили для нормализации, чтобы не добавлять их отдельно:
/* установим отступ 1rem от нижнего края элемента */
.text-field {
margin-bottom: 1rem;
}
/* стили для label */
.text-field__label {
display: block;
margin-bottom: 0.25rem;
}
/* стили для input */
.text-field__input {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #bdbdbd;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}Примененные CSS свойства к элементу <input>, и то, что они делают:
display: block– устанавливает блочное отображение;width: 100%– занимает всю доступную ширину;height: calc(2.25rem + 2px)– высота элемента определяется путём сложения 2.25rem (font-size * line-height + padding-top + padding-bottom) и 2px (ширина верхней и нижней границы);margin: 0– убираетmarginотступы;padding: 0.375rem 0.75rem– внутренние поля: сверху и снизу – 0.375rem, а слева и справа – 0.75rem;font-family: inherit– чтобы шрифт был такой как у родительского элемента, а не тот который браузер по умолчанию назначает для<input>;font-size: 1rem– устанавливает явный размер шрифта, иначе будет браться из стилей браузера для<input>;font-weight: 400– задаёт начертание шрифта;line-height: 1.5– высота строки (1.5 * размер шрифта);color: #212529– цвет шрифта;background-color: #fff– цвет фона;background-clip: padding-box– указывает, что фон (фоновое изображение) нужно рисовать только до внешнего края отступа (под границей не выводить);border: 1px solid #bdbdbd– устанавливает границу, у которой: 1px (толщина), solid (тип линии) и#bdbdbd(цвет);border-radius: 0.25rem– радиус скругления углов;transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out– выполняет изменение значений свойствborder-colorиbox-shadowс анимацией длительностью 0.15 секунд посредством временной функциейease-in-out.
В результате получили следующее оформление:
Посмотреть
Стилизуем плейсхолдер. По умолчанию плейсхолдер отображается полупрозрачным или светло-серым цветом. Получить его можно с помощью ::placeholder. Оформим его следующим образом:
.text-field__input::placeholder {
color: #212529;
opacity: 0.4;
}
Посмотреть
Стили для <input> в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus):
.text-field__input:focus {
color: #212529;
background-color: #fff;
border-color: #bdbdbd;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
}
Посмотреть
Оформление <input>, когда он находится в состоянии disabled и readonly:
<style>
.text-field__input:disabled,
.text-field__input[readonly] {
background-color: #f5f5f5;
opacity: 1;
}
</style>
<!-- disabled -->
<div class="text-field">
<label for="firstname">Имя пользователя (disabled)</label>
<input type="text" name="firstname" id="firstname" placeholder="Alaxander" disabled>
</div>
<!-- readonly -->
<div class="text-field">
<label for="city">Город (readonly)</label>
<input class="text-field__input" type="text" name="city" id="city" placeholder="Moscow" value="Moscow" readonly>
</div>
Посмотреть
Этот набор стилей будет у нас отправной точкой для создания других.
input с иконкой
Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.
Для этого дополнительно обернём элемент <input> в <div> с классами text-field__icon text-field__icon_email:
<div class="text-field">
<label class="text-field__label" for="email">Email</label>
<div class="text-field__icon text-field__icon_email">
<input class="text-field__input" type="email" placeholder="alexander@itchief.ru" value="alexander@itchief.ru">
</div>
</div>
<div class="text-field">
<label class="text-field__label" for="text">Найти</label>
<div class="text-field__icon text-field__icon_search">
<input class="text-field__input" type="text" placeholder="css" value="css уроки">
</div>
</div>Первый класс (text-field__icon) будем использовать для того, чтобы установить относительное позиционирование (position: relative). Это действие позволит нам разместить иконку в нужном месте относительно input, используя уже абсолютное позиционирование (position: absolute). Второй класс (text-field__icon_email) будет определять иконку, которую мы хотим вставить.
.text-field__icon {
position: relative;
}
.text-field__icon::before {
content: '';
color: #bdbdbd;
position: absolute;
display: flex;
align-items: center;
top: 0;
bottom: 0;
left: 0.625rem;
top: 50%;
transform: translateY(-50%);
}
.text-field__icon .text-field__input {
padding-left: 2rem;
}
/* email значок */
.text-field__icon_email::before {
content: '@';
}
/* иконка лупы */
.text-field__icon_search::before {
width: 1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
Посмотреть
Ещё один вариант оформления:
Посмотреть
input с активной svg-иконкой
В этом примере поместим в input иконку, на которую можно нажать.
<div class="text-field">
<label class="text-field__label" for="search">Найти</label>
<div class="text-field__icon">
<input class="text-field__input" type="search" name="search" id="search" placeholder="css" value="css уроки">
<span class="text-field__aicon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /></svg>
</span>
</div>
</div>Для этого мы также как и в предыдущем примере обернули <input> в <div class="text-field__icon">...<div>. Саму svg-иконку обернули в <span> с классом text-field__aicon и поместили рядом с <input>.
Оформление выполнили так:
.text-field__icon {
position: relative;
}
.text-field__icon input {
padding-right: 2.5rem;
}
.text-field__aicon {
position: absolute;
display: flex;
align-items: center;
top: 0;
bottom: 0;
right: 0.875rem;
width: 1rem;
cursor: pointer;
color: #bdbdbd;
transition: color 0.15s ease-in-out;
}
.text-field__aicon:hover {
color: #212529;
}
Посмотреть
Ещё пример вставки иконки в input:
Посмотреть
input с кнопкой
HTML-разметка input с кнопкой:
<div class="text-field">
<label class="text-field__label" for="search">Найти</label>
<div class="text-field__group">
<input class="text-field__input" type="search" id="search" name="search">
<button class="text-field__btn" type="button">Найти</button>
</div>
</div>Расположение кнопки справа от input выполним с помощью флексов:
.text-field__group {
display: flex;
}
/* кнопка */
.text-field__btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: #eee;
border: 1px solid #bdbdbd;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: background-color .15s ease-in-out;
}
.text-field__btn:hover {
background-color: #bdbdbd;
}
.text-field__group .text-field__input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
position: relative;
z-index: 2;
}
.text-field__group .text-field__btn {
position: relative;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
}
Посмотреть
input с плавающим label
Разметка input с плавающим label:
<div class="text-field text-field_floating">
<input class="text-field__input" type="email" id="email" placeholder="alexander@itchief.ru">
<label class="text-field__label" for="email">Email</label>
</div>
<p>Когда указано значение value:</p>
<div class="text-field text-field_floating">
<input class="text-field__input" type="name" id="name" value="Alexander">
<label class="text-field__label" for="name">Name</label>
</div>CSS код:
.text-field_floating {
position: relative;
}
.text-field_floating .text-field__input {
height: calc(3.5rem + 2px);
line-height: 1.25;
padding: 1rem 0.75rem;
}
.text-field_floating .text-field__label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem .75rem;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}
.text-field_floating .text-field__input::-moz-placeholder {
color: transparent;
}
.text-field_floating .text-field__input::placeholder {
color: transparent;
}
.text-field_floating .text-field__input:focus,
.text-field_floating .text-field__input:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: .625rem;
}
.text-field_floating .text-field__input:focus~.text-field__label,
.text-field_floating .text-field__input:not(:placeholder-shown)~.text-field__label {
opacity: .65;
transform: scale(.85) translateY(-.75rem) translateX(.15rem);
}
Посмотреть
Ещё один вариант с «плавающей» меткой:
Посмотреть
Третий вариант:
Посмотреть
input со счётчиком символов
Пример в котором под input отображается количество набранных символов и максимальная длина:
Посмотреть
Это выполняется посредством следующего кода:
<div class="text-field">
<label class="text-field__label" for="login">Логин</label>
<input class="text-field__input" type="text" name="login" id="login" placeholder="Login" maxlength="20" required>
<div class="text-field__counter"></div>
</div>
<script>
const elemLogin = document.querySelector('#login');
const elemCounter = elemLogin.nextElementSibling;
const maxLength = elemLogin.maxLength;
const updateCounter = (e) => {
const len = e ? e.target.value.length : 0;
elemCounter.textContent = `${len} / ${maxLength}`;
}
updateCounter();
elemLogin.addEventListener('keyup', updateCounter);
elemLogin.addEventListener('keydown', updateCounter);
</script>Стили для отображения состояния валидации input
Применить стили в зависимости от состояния поля в CSS можно с помощью специальных псевдоклассов. Например, :valid позволяет выбрать валидные элементы, а :invalid — не валидные.
.text-field__input:invalid,
.text-field__input:valid {
border-color: #dc3545;
padding-right: 2.25rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.5625rem center;
background-size: 1.125rem 1.125rem;
}
.text-field__input:valid {
border-color: #198754;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.text-field__input:invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.text-field__input:valid:focus {
border-color: #198754;
box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}Но, если вы хотите контролировать этот процесс и добавлять стили с помощью JavaScript, то тогда лучше это делать через классы. Например, использовать класс text-field__input_valid при успешной валидации, а
text-field__input_invalid — при не успешной. Их следует добавлять к <input>.
<div class="text-field">
<label class="text-field__label" for="city">City</label>
<!-- text-field__input_invalid -->
<input class="text-field__input text-field__input_invalid" type="text" name="city" id="city">
<div class="text-field__message">Укажите город.</div>
</div>
<div class="text-field">
<label class="text-field__label" for="username">First name</label>
<!-- text-field__input_valid -->
<input class="text-field__input text-field__input_valid" type="text" name="firstname" id="firstname"
value="Alexander">
<div class="text-field__message">Отлично!</div>
</div>
Отображать сообщения пользователю или подсказки можно через <div class="text-field__message">...</div>.
Посмотреть
Для <input> с плавающим <label>:
Посмотреть
Посмотреть
Посмотреть
Пример валидации формы с помощью JavaScript
Валидацию элементов формы будем осуществлять с помощью функции checkValidity(). После этого, в зависимости от её результата, будем добавлять той или иной класс к <input>, а также сообщение (input.validationMessage) в элемент .text-field__message.
// input - переменная, содержащая элемент <input>
if (input.checkValidity()) {
input.classList.add('text-field__input_valid');
input.nextElementSibling.textContent = 'Отлично!';
} else {
input.classList.add('text-field__input_invalid');
input.nextElementSibling.textContent = input.validationMessage;
}
Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу <form> необходимо добавить атрибут novalidate:
<form id="form" action="#" novalidate>
...
</form>
Клиентская проверка формы после нажатия «Отправить»:
Посмотреть
Пример валидации формы в реальном времени:
Посмотреть
Отображение только ошибок:
Посмотреть
I have created an input field for a log-in feature on the page however I have been trying to change the color of the text in the field using css. Is this possible. I have tried many routes however none seem to work so far. Below is the code for the email portion of the sign in.
<input class="form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}"
data-ng-model="signinController.signin.email"
type="email"
name="email"
id="email"
placeholder="Email"
ng-minlength="2"
ng-maxlength="3"
required>
asked Jun 14, 2016 at 4:21
3
Yes, it is possible.
The CSS can target the input of type «email» or just this unique input.
Email input element:
input[type=email]{
color: red;
}
Or specific id=»email»:
#email {
color: red;
}
Here’s a snippet:
input[type=email] {
color: red;
}
#email2 {
color: green;
}<input class="form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}"
data-ng-model="signinController.signin.email"
type="email"
name="email"
id="email"
placeholder="Email"
ng-minlength="2"
ng-maxlength="3"
required>
<input class="form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}"
data-ng-model="signinController.signin.email"
type="email"
name="email"
id="email2"
placeholder="Email"
ng-minlength="2"
ng-maxlength="3"
required>If this still isn’t working, you may have to use the «!important» attribute to override other CSS setters.
color: red !important;
answered Jun 14, 2016 at 4:42
StephenStephen
5668 silver badges19 bronze badges
I think you can do this in your css file :
#email{
color:red;
}
You can give color of your choice.
answered Jun 14, 2016 at 4:26
Nakul KumarNakul Kumar
1742 silver badges11 bronze badges
Create a css class that holds the changes you want to do to the fields , and then affect the class to the input tags via ng-class directive.
In your code the syntax is wrong I think.. but that’s the idea.
answered Jun 14, 2016 at 4:23
You can apply the following code
input { color: red; }
answered Jun 14, 2016 at 4:32
SESNSESN
1,23514 silver badges21 bronze badges
Many of your suggestions work great. This is the route I used with css
input, select, textarea{
color: #076000;
}
textarea:focus, input:focus {
color: #076000;
}
answered Jun 14, 2016 at 17:23
NVANVA
1,6325 gold badges17 silver badges24 bronze badges
It is definitely possible that you can change your input’s text color with CSS and there are quite some ways to that depending upon the result you want to achieve.
For example, if you want to set your colour to blue and have it always stay blue, you can use the following code:
#email {
color: blue; /* Or color: #0000ff */
}
Alternatively, if you want to change your text’s colour when your selected input has focus, you can use this instead:
#email:focus {
color: blue; /* Or color: #0000ff */
}
You can also change your colour on hover, but this is not something that is used very often:
#email:hover {
color: blue; /* Or color: #0000ff */
}
answered Jun 14, 2016 at 4:40
Angel PolitisAngel Politis
10.8k14 gold badges47 silver badges65 bronze badges
To change input color for different types of input use respective tag (with/without its pseudo state)
input, select, textarea {
color: #000;
}
input:focus, input:active
/* etc... */
input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
/* etc.. */
input[type=text]:focus
/* etc */
For placeholder styling
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
answered Jun 14, 2016 at 5:07
4dgaurav4dgaurav
11.3k4 gold badges31 silver badges58 bronze badges
I have created an input field for a log-in feature on the page however I have been trying to change the color of the text in the field using css. Is this possible. I have tried many routes however none seem to work so far. Below is the code for the email portion of the sign in.
<input class="form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}"
data-ng-model="signinController.signin.email"
type="email"
name="email"
id="email"
placeholder="Email"
ng-minlength="2"
ng-maxlength="3"
required>
asked Jun 14, 2016 at 4:21
3
Yes, it is possible.
The CSS can target the input of type «email» or just this unique input.
Email input element:
input[type=email]{
color: red;
}
Or specific id=»email»:
#email {
color: red;
}
Here’s a snippet:
input[type=email] {
color: red;
}
#email2 {
color: green;
}<input class="form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}"
data-ng-model="signinController.signin.email"
type="email"
name="email"
id="email"
placeholder="Email"
ng-minlength="2"
ng-maxlength="3"
required>
<input class="form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}"
data-ng-model="signinController.signin.email"
type="email"
name="email"
id="email2"
placeholder="Email"
ng-minlength="2"
ng-maxlength="3"
required>If this still isn’t working, you may have to use the «!important» attribute to override other CSS setters.
color: red !important;
answered Jun 14, 2016 at 4:42
StephenStephen
5668 silver badges19 bronze badges
I think you can do this in your css file :
#email{
color:red;
}
You can give color of your choice.
answered Jun 14, 2016 at 4:26
Nakul KumarNakul Kumar
1742 silver badges11 bronze badges
Create a css class that holds the changes you want to do to the fields , and then affect the class to the input tags via ng-class directive.
In your code the syntax is wrong I think.. but that’s the idea.
answered Jun 14, 2016 at 4:23
You can apply the following code
input { color: red; }
answered Jun 14, 2016 at 4:32
SESNSESN
1,23514 silver badges21 bronze badges
Many of your suggestions work great. This is the route I used with css
input, select, textarea{
color: #076000;
}
textarea:focus, input:focus {
color: #076000;
}
answered Jun 14, 2016 at 17:23
NVANVA
1,6325 gold badges17 silver badges24 bronze badges
It is definitely possible that you can change your input’s text color with CSS and there are quite some ways to that depending upon the result you want to achieve.
For example, if you want to set your colour to blue and have it always stay blue, you can use the following code:
#email {
color: blue; /* Or color: #0000ff */
}
Alternatively, if you want to change your text’s colour when your selected input has focus, you can use this instead:
#email:focus {
color: blue; /* Or color: #0000ff */
}
You can also change your colour on hover, but this is not something that is used very often:
#email:hover {
color: blue; /* Or color: #0000ff */
}
answered Jun 14, 2016 at 4:40
Angel PolitisAngel Politis
10.8k14 gold badges47 silver badges65 bronze badges
To change input color for different types of input use respective tag (with/without its pseudo state)
input, select, textarea {
color: #000;
}
input:focus, input:active
/* etc... */
input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
/* etc.. */
input[type=text]:focus
/* etc */
For placeholder styling
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
answered Jun 14, 2016 at 5:07
4dgaurav4dgaurav
11.3k4 gold badges31 silver badges58 bronze badges
При помощи CSS можно качественно улучшить внешний вид HTML форм:
Стилизация полей ввода
Для определения ширины поля ввода можно использовать свойство width:
Ваше имя
input {
width: 100%;
}
В приведенном выше примере стили будут применяться ко всем элементам <input>. Если же вам нужно настроить стили для поля ввода определенного типа, то вы можете использовать селекторы атрибутов:
input[type=text]— выберет только текстовые поля вводаinput[type=password]— выберет только поля ввода паролейinput[type=number]— выберет только цифровые поля ввода- и так далее..
Промежутки у полей ввода
Чтобы добавить дополнительные промежутки внутри поля ввода, используйте свойство padding.
Когда в форме много полей ввода, идущих друг за другом, также может потребоваться использовать свойство margin, чтобы добавить дополнительные отступы снаружи поля ввода:
Ваше имя
Ваша фамилия
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Обратите внимание, что мы установили для свойства box-sizing значение border-box. Это сделано для того, чтобы промежутки и рамки включались в ширину и высоту элементов.
Поля ввода с рамкой
Чтобы изменить цвет и размер рамки поля ввода, используйте свойство border. Для добавления закругленных углов, используйте свойство border-radius:
Ваше имя
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Если вы хотите, чтобы рамка была только снизу поля ввода, то используйте свойство border-bottom:
Ваше имя
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
Цветные поля ввода
Чтобы добавить фоновый цвет для поля ввода, используйте свойство background-color. Чтобы изменить цвет текста в поле ввода, используйте свойство color:
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Поля ввода в фокусе
По умолчанию, некоторые браузеры добавляют синюю внешнюю рамку вокруг поля ввода, когда оно получает фокус (пользователь кликает на него). Вы можете убрать такое поведение добавив для поля ввода свойство outline: none;.
Чтобы определить какой-нибудь свой стиль для поля ввода, находящегося в фокусе, используйте псевдокласс :focus:
input[type=text]:focus {
background-color: lightblue;
}
input[type=text]:focus {
border: 3px solid #555;
}
Поле ввода с иконкой/изображением
Если вы хотите внутри поля ввода разместить иконку, то используйте свойство background-image. Позиционировать ее можно при помощи свойства background-position. Также, обратите внимание, что мы добавляем большой отступ слева, чтобы зарезервировать место для иконки:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Анимированное поле ввода
В следующем примере мы используем свойство transition, чтобы добавить анимацию на изменение ширины поля ввода, когда оно получает фокус:
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Стилизация области ввода
Чтобы запретить изменять размер области текстового ввода (отключить «захват» в левом нижнем углу), используйте свойство resize:
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Стилизация меню выбора
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Стилизация кнопок ввода
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
Чтобы ширина кнопки была во весь экран, используйте width: 100%;.
Урок 15. Формы
Здравствуй, уважаемый читатель.
Это пятнадцатый урок изучения CSS. В этом уроке вы узнаете как работать с элементами формы, а именно как задать фон для текстового поля и текстовой области, а также как применять другие свойства для разных элементов.
Перед изучением данного урока пройдите предыдущие уроки:
Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2
Урок 14. Таблицы
Теория и практика
Изучая html мы создавали формы с помощью тегов <form>, а внутри создавали необходимое количество <input> и <textarea>.
Оформление поля input
Для того чтобы задать свойство для элемента формы нам необходим селектор. Этим селектором могут выступать такие теги как input(в этом случае как вы уже знаете мы зададим стиль для всех input-ов), textarea или селектор class. Рассмотрим на примере «для всех полей input зададим фон голубой, цвет букв синий и рамку синего цвета». Для работы возьмем следующую форму:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form> <p>Введите Ваше имя:</p> <input type="text" name="name" value="Ваше имя..." size="20" maxlength="15"> <p>Введите Вашу фамилию:</p> <input type="text" name="surname" value="Ваша фамилия..." size="20" maxlength="15"> <p>Расскажите немного о себе:</p> <textarea name="aboutyou" cols="40" rows="6"></textarea> </form> </body> </html> |
И для того чтобы преобразить данную форму используем следующий CSS код:
1 2 3 4 5 6 |
input{ background-color:#D3D5FF; /* голубой фон */ color:#0007D3; /* синий цвет букв */ border:2px solid #7A7DD6; /* синяя рамка в два пикселя */ padding:5px; /* внутренний отступ для текста в 5 пикселей */ } |
Как это выглядит в браузере:
Я думаю объяснять всё подробно нет необходимости. Но заострю лишь внимание на моменте, где мы указываем селектор. Мы написали селектор «input» — а это значит что данный стиль применится для всех полей на странице. Если вы хотите задать какому-то определенному полю стиль, необходимо прописать ему в html атрибут class=» « и вписать свойство в CSS.
Оформление поля textarea
Также мы можем оформить по своему желанию текстовую область — textarea. Как вы уже догадались это можно сделать также двумя способами. При оформлении текстовой области в этом уроке мы воспользуемся вторым способом через атрибут class=» «. Мы имеем html страницу, которая была в начале урока. Присвоим для текстовой области атрибут class=»niceText»:
1 |
<textarea name="aboutyou" class="niceText" cols="40" rows="6"></textarea>
|
Затем на фон установим изображение и выделим текстовую область синей рамкой:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
input{ background-color:#D3D5FF; /* голубой фон */ color:#0007D3; /* синий цвет букв */ border:2px solid #7A7DD6; /* синяя рамка в два пикселя */ padding:5px; /* внутренний отступ для текста в 5 пикселей */ } .niceText{ background-image:url('about.png'); /* изображение для заднего фона */ background-repeat:no-repeat; /* запрещаем повтор фонового изображения */ background-position:100% 100%; /* смещаем его в правый нижний угол */ border:2px solid #7A7DD6; /* синяя рамка в два пикселя */ } |
Как это выглядит в браузере:
Посмотреть примерСкачать
Картинка вместо кнопки input
И последнее что мы рассмотрим в этом уроке это изображение вместо простой кнопки. Возьмем следующий код html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form> <p>Введите Ваше имя:</p> <input type="text" class="textInput" name="name" value="Ваше имя..." size="20" maxlength="15"> <p>Введите Вашу фамилию:</p> <input type="text" class="textInput" name="surname" value="Ваша фамилия..." size="20" maxlength="15"> <p>Расскажите немного о себе:</p> <textarea name="aboutyou" cols="40" rows="6"></textarea> <div class="sendA"><input type="image" name="submit" src="send.png"></div> </form> </body> </html> |
И применим следующие свойства CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.textInput{ background-color:#D3D5FF; /* голубой фон */ color:#0007D3; /* синий цвет букв */ border:2px solid #7A7DD6; /* синяя рамка в два пикселя */ padding:5px; /* внутренний отступ для текста в 5 пикселей */ } .niceText{ background-image:url('about.png'); /* изображение для заднего фона */ background-repeat:no-repeat; /* запрещаем повтор фонового изображения */ background-position:100% 100%; /* смещаем его в правый нижний угол */ border:2px solid #7A7DD6; /* синяя рамка в два пикселя */ } .sendA{ margin:20px 0 0 20px; /* отступ снизу и слева для кнопки */ } |
Всё что мы изменили это каждому input-у добавили атрибут class=»textInput». А в конце вместо обычной кнопки мы вставили input с атрибутами type=»image» name=»submit» src=»send.png».
type=»image» — определяет что у нас будет изображение вместо кнопки;
name=»submit» — имя кнопки;
src=»send.png» — путь где расположено изображение для кнопки.
Как это выглядит в браузере:
Посмотреть примерСкачать
На этом я заканчиваю наш урок. Я уверен что это для вас несложно и вы быстро поняли что к чему. Поэтому поэкспериментируйте и двигайтесь к следующему уроку!