Как изменить цвет поля ввода - Исправление ошибок и поиск оптимальных решений проблем

Как изменить цвет текста и фона в текстовом поле?

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>

Источник

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

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

Источник

 <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

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

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%;.

Источник

По умолчанию замещающий текст поля ввода <input> и <textarea> отображается светло-серым цветом, и стандартного CSS-свойства для его стилизации нет. Однако есть некоторые нестандартные псевдоэлементы и псевдоклассы, зависящие от браузера, которые можно использовать для настройки внешнего вида текста-заполнителя, как показано в следующем примере:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styling Placeholder Text with CSS</title>
<style>
    ::-webkit-input-placeholder {
       color: orange;
    }
    :-moz-placeholder { /* Upto Firefox 18, Deprecated in Firefox 19  */
       color: orange;  
    }
    ::-moz-placeholder {  /* Firefox 19+ */
       color: orange;  
    }
    :-ms-input-placeholder {  
       color: orange;  
    }
</style>
</head>
<body>
    <form>
        <p><input type="text" placeholder="Пожалуйста, введите Ваше имя"><p>
        <p><textarea placeholder="Пожалуйста, введите свой комментарий" cols="30"></textarea><p>
    </form>
</body>
</html>

Интерактивный пример

Value	7-значная `DOMString` , указывающая `<color>` в строчной шестнадцатеричной системе счисления
События	`change` и `input`
Поддерживаемые общие атрибуты	`autocomplete` и `list`
IDL атрибуты	`list` и `value`
Методы	`select()` (en-US)

Value

value элемента <input> типа color всегда является DOMString, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.

Использование настроек цвета

Входные данные типа color просты из-за ограниченного числа атрибутов, которые они поддерживают.

Предоставление цвета по умолчанию

Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:

<input type="color" value="#ff0000">

Если вы не зададите значение, то по умолчанию будет #000000, то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ»#», за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

Отслеживание изменений цвета

Как и в случае с другими типами <input>, есть два события, которые могут быть использованы для обнаружения изменения цвета значения: input и change. input запускается на элементе <input> каждый раз, когда меняется цвет. change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value.

Вот пример, который наблюдает за изменениями со временем значения цвета:

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

Выбор значения

Если реализация элемента <input> типа color в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () (en-US) метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует color, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.

Вариации внешнего вида

Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:

То же самое можно увидеть и в Firefox 55:

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

Validation

Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс :invalid.

Пример

Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания change и input событий, чтобы взять новый цвет и применить его к каждому <р> элемента в документе.

HTML

HTML довольно прост — пара абзацев описательного материала с <input> типа color с идентификатором colorWell, который мы будем использовать для изменения цвета текста абзацев.

<p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code>
   control.</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell">

<p>Watch the paragraph colors change when you adjust the color picker.
   As you make changes in the color picker, the first paragraph's
   color changes, as a preview (this uses the <code>input</code>
   event). When you close the color picker, the <code>change</code>
   event fires, and we detect that to change every paragraph to
   the selected color.</p>

JavaScript

Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик load для выполнения основной работы запуска, как только страница будет полностью загружена.

var colorWell;
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузки startup():

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

Это возвращает ссылку на элемент color <input> в переменной colorWell, а затем устанавливает значение входного цвета в значение defaultColor. То цвет входное input событие настроено, чтобы вызвать updateFirst() функцию и change событие, вызывается updateAll(). Они оба видны ниже.

Наконец, мы вызываем select () (en-US) для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

Реакция на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция updateFirst() вызывается в ответ на input событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку input события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие change. Мы обрабатываем это событие с помощью функции updateAll(), используя Event.target.value для получения окончательного выбранного цвета:

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

Это устанавливает цвет каждого элемента <p> таким образом, чтобы его атрибут color (en-US) соответствовал текущему значению входного цвета, на которое ссылаются с помощью event.target.

Результат

Финальный результат выглядит так:

Спецификации

Specification
HTML Standard # color-state-(type=color)

Браузерная совместимость

BCD tables only load in the browser

Изучите также

Источник

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал 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

Я обычно устанавливаю *
{box-sizing:border-box;} не только для форм, но и
для веб-страниц. Благодаря этому ширина
(width) всех элементов будет содержать
внутренние отступы (padding).

Пример:

.some-class {
  width:200px;
  padding:20px;
}

Ширина
.some-class без box-sizing:border-box будет больше
200px, что может стать проблемой. Поэтому
большинство разработчиков используют
border-box для всех элементов.

Ниже приведена улучшенная версия
нашего первоначального кода. В нее также
добавлены псевдоэлементы :before и :after.

*, *:before, *:after {
  box-sizing: border-box;
}

Совет:
универсальный селектор * выбирает все
элементы в документе.

2. Селекторы CSS для элементов
ввода

Самый простой способ выбрать элементы
ввода — использовать селекторы атрибутов.

input[type=text] {
  // input elements with type="text" attribute
}
input[type=password] {
  // input elements with type="password" attribute
}

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

<input type="text" class="signup-text-input" />

Тогда:

.signup-text-input {
   // styles here
}

3. Базовые методы стилизации
для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают
однострочными. Обычно такое поле
представляет собой простой блок с
границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного
текстового поля с плейсхолдером.

<input type="text" placeholder="Name" />

Выглядеть это будет так:

Чтобы
сделать это текстовое поле более
привлекательным, можно использовать
следующие свойства CSS:

Padding (внутренние отступы)
Margin (внешние отступы)
Border (граница)
Box shadow (тень блока)
Border radius (для скругления границ)
Width (ширина)
Font (шрифт)

Давайте пройдемся по каждому из этих
свойств.

Padding

Добавление некоторого внутреннего
пространства может повысить четкость.
Чтобы это сделать, применяем свойство
padding.

input[type=text] {
  padding: 10px;
}

Margin

Если рядом с вашим полем ввода есть
другие элементы, вы можете захотеть
добавить внешний отступ, чтобы избежать
слипания элементов.

input[type=text] {
  padding:10px;
  margin:10px 0; // add top and bottom margin
}

Border

В большинстве браузеров текстовые
поля ввода имеют границы, которые вы
можете кастомизировать.

.border-customized-input {
   border: 2px solid #eee;
}

Вы также можете вообще убрать границу.

.border-removed-input {
  border: 0;
}

Совет:
если убираете границу, обязательно
добавьте цвет фона или тень. В противном
случае пользователь просто не увидит
ваше поле.

Некоторые веб-дизайнеры предпочитают
оставлять только нижнюю границу. При
таком варианте пользователь как бы
будет писать на строчке, как в блокноте.

.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] {
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}

Border radius

Свойство border-radius может очень сильно
изменить вид ваших форм. Поля для ввода
текста, имеющие скругление углов,
выглядят совсем иначе.

.rounded-input {
  padding:10px;
  border-radius:10px;
}

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы
установить ширину поля ввода.

input {
  width:100%;
}

Font

Большинство браузеров используют
разные семейства шрифтов и размер шрифта
для элементов форм. Если необходимо,
можно установить наследование шрифта
от документа.

input, textarea {
  font-family:inherit;
  font-size: inherit;
}

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и
для других полей — области текста,
радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое
из них.

Текстовые области (text areas)

Текстовые области напоминают
однострочные текстовые поля ввода, с
той лишь разницей, что здесь пользователь
может ввести не одну строку текста.
Обычно они используются, если нужно
принимать более «многословные» данные:
комментарии, сообщения и т. п. Для
стилизации этих областей вы можете
использовать все свойства, о которых
мы говорили ранее.

Также для текстовых областей применимо
и очень полезно свойство resize. В большинстве
браузеров текстовые области по умолчанию
могут растягиваться как по оси x, так и
по оси y (значение: both). Но вы можете
установить для этого свойства также
значение horizontal или vertical.

Посмотрите на пример:

See the Pen
Styled Textarea (for LogRocket) by Supun Kavinda (@SupunKavinda)
on CodePen.

Здесь
я использовал resize:vertical, чтобы разрешить
изменение размера исключительно по
вертикали. Такая практика применяется
в большинстве форм, поскольку позволяет
избежать появления горизонтальной
полосы прокрутки.

Примечание: если вам нужно создать
текстовую область с автоматическим
изменением размера, следует использовать
JavaScript. Но в нашей статье мы не будем
углубляться в эту тему.

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки
очень сложно стилизовать, для этого
требуется более сложный CSS-код (и HTML —
тоже).

Для стилизации чекбокса используйте
следующий HTML-код.

<label>Name
  <input type="checkbox" />
  <span></span>
</label>

Несколько
вещей, на которые нужно обратить внимание:

Поскольку мы используем <label> в
качестве обертки для <input>, если вы
кликнете на любой элемент внутри
<«label«>, «кликнутым» будет <input>.
Мы спрячем <input>, потому что
браузеры практически не позволяют нам
его модифицировать.
<span> создает пользовательский
чекбокс.
Чтобы получить положение «отмечено»
и стилизовать пользовательский чекбокс,
мы будем использовать псевдокласс
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 name="animal">
    <option value="lion">Lion</option>
    <option value="tiger">Tiger</option>
    <option value="leopard">Leopard</option>
</select>

Вы
можете стилизовать элемент <select>,
чтобы он выглядел более привлекательно.

select {
  width: 100%;
  padding:10px;
  border-radius:10px;
}

Но вы не можете стилизовать выпадающие
элементы, потому что их стили зависят
от операционной системы. Единственный
способ изменить их вид — использовать
JavaScript.

Кнопки

Как и у большинства элементов, у кнопок
есть стили, установленные по умолчанию.

<button>Click Me</button>

Давайте немного украсим нашу кнопку.

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 (этим мы уже пользовались)

Эти могут использоваться для создания
эффектов для каждого состояния:

:hover
:focus
:active

Сообщения, генерируемые при
помощи :required

Показываем сообщение о том, что
заполнение поля является обязательным:

<label>Name
  <input type="text">
  <span></span>
</label>
<label>Email
  <input type="text" required>
  <span></span>
</label>


label {
  display:block;
}
input:required + span:after {
  content: "Required";
}

Если
вы удалите атрибут required при помощи
JavaScript, сообщение «Required» исчезнет
автоматически.

Примечание: <input> не может содержать
другие элементы. А значит, и псевдоэлементы
:after или :before. Поэтому нам нужно использовать
другой элемент — <span>.

Мы можем сделать то же самое с
псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него
наводится курсор мыши. :focus выбирает
элемент, когда тот в фокусе.

Эти псевдоклассы часто используются
для создания переходов и легких визуальных
изменений. Например, можно менять ширину,
цвет фона, цвет границы, густоту тени и
т. п. Если вместе с этими свойствами
использовать свойство transition, изменения
будут более плавными.

Вот несколько эффектов наведения для
элементов формы (попробуйте навести
курсор на разные поля):

See the Pen
yLNKZqg by Supun Kavinda (@SupunKavinda)
on CodePen.

Когда пользователь видит небольшие
изменения в элементе, происходящие при
наведении мыши, он понимает, что с
элементом можно что-то делать. Это важно
для дизайна элементов форм.

Вы замечали, что в некоторых браузерах
вокруг элемента, находящегося в фокусе,
появляется синяя внешняя граница? Вы
можете использовать псевдокласс :focus,
чтобы удалить ее и добавить другие
эффекты для элемента в фокусе.

Следующий код удаляет внешнюю границу
для всех элементов:

*:focus {outline:none !important}

Добавляем внешнюю границу для элементов
в фокусе:

input[type=text]:focus {
  background-color: #ffd969;
  border-color: #000;
  // and any other style
}

6. Элементы ввода, недоступные для
кастомизации

Стилизация элементов форм всегда была
сложной задачей. Есть некоторые элементы,
с которыми не многое можно сделать в
плане изменения стиля. Например:

<input type=»color»>
<input type=»file»>
<progress>
<option>, <optgroup>, <datalist>

Эти элементы предоставляются браузером
и стилизуются в зависимости от вашей
ОС. Единственный способ изменить их
стиль — использовать кастомные контролы
(Custom Controls), созданные при помощи div, span и
прочих HTML-элементов, поддающихся
стилизации.

Например, чтобы стилизовать <input
type=»file»>, мы можем спрятать дефолтный
input и использовать пользовательскую
кнопку.

Кастомные контролы для элементов форм
уже разработаны для основных
JavaScript-библиотек. Найти их можно на
GitHub.

Заключение

К этому моменту у вас уже должно
появиться понимание того, как стилизуются
простые элементы форм и как использовать
кастомные контролы для стилизации
остальных элементов. Конечно, это лишь
основные строительные блоки, при помощи
которых вы можете создавать стили,
рисуемые вашим воображением.

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

Источник

Как изменить цвет текста и фона в текстовом поле?

Задача

Решение

Стилизация полей ввода

Промежутки у полей ввода

Поля ввода с рамкой

Цветные поля ввода

Поля ввода в фокусе

Поле ввода с иконкой/изображением

Анимированное поле ввода

Стилизация области ввода

Стилизация меню выбора

Стилизация кнопок ввода

Читайте также

Похожие посты

Интерактивный пример

Value

Использование настроек цвета

Предоставление цвета по умолчанию

Отслеживание изменений цвета

Выбор значения

Вариации внешнего вида

Validation

Пример

HTML

JavaScript

Инициализация

Реакция на изменение цвета

Результат

Спецификации

Браузерная совместимость

Изучите также

Хочешь знать больше про веб?

1. Устанавливаем box-sizing

2. Селекторы CSS для элементов ввода

3. Базовые методы стилизации для однострочных текстовых полей ввода

Padding

Margin

Border

Box shadow

Border radius

Width

Font

4. Стилизация прочих типов полей ввода

Текстовые области (text areas)

Чекбоксы и радиокнопки

Раскрывающийся список

Кнопки

5. Псевдоклассы UI

Сообщения, генерируемые при помощи :required

:hover и :focus

6. Элементы ввода, недоступные для кастомизации

Заключение

Читайте также:

2. Селекторы CSS для элементов
ввода

3. Базовые методы стилизации
для однострочных текстовых полей ввода

Сообщения, генерируемые при
помощи :required

6. Элементы ввода, недоступные для
кастомизации