Как поменять цвет у placeholder css
Перейти к содержимому

Как поменять цвет у placeholder css

  • автор:

Меняем цвет текста для селектора ::placeholder

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

 input::-webkit-input-placeholder < /* для Edge браузера*/ color: red; >input:-ms-input-placeholder < /* для Internet Explorer 10-11 */ color: red; >input::placeholder

Комментарии 0 комментариев

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

Что еще посмотреть?

CRM-система для общепита Poster отключила 10 тысяч клиентов из России и Белоруссии из-за войны на Украине

0 2567 03.03.2022

Готовый файл htaccess для Битрикс

caret — color

С помощью caret — color можно менять цвет курсора в режиме набора текста.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 6 февраля 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство caret — color задаёт цвет текстового курсора в полях ввода, например, или .

Пример

Скопировать ссылку «Пример» Скопировано

Курсор в поле ввода будет красного цвета:

   Красная каретка  label> Красная каретка input class="red" type="text" placeholder="Красная каретка"> label>      
 .red  caret-color: red;> .red  caret-color: red; >      

В примере ниже ещё несколько полей ввода с каретками разного цвета:

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значением для caret — color может быть любое поддерживаемое в CSS обозначение цвета. Кроме того доступны ключевые слова:

  • auto — значение по умолчанию, пользовательский агент выбирает подходящий цвет для каретки. Обычно это current Color , но пользовательский агент может выбрать другой цвет, чтобы обеспечить хорошую видимость и контраст с окружающим содержимым, принимая во внимание значение current Color , фон, тени и другие факторы.
  • transparent — можно использовать везде, где допустимо значение цвета. Это позволяет вам сделать элементы прозрачными, чтобы любой фоновый элемент был виден.
  • current Color — соответствует значению свойства color для текущего элемента. Это позволяет использовать значение цвета для свойств, которые не наследуют его по умолчанию.

Как понять

Скопировать ссылку «Как понять» Скопировано

Простое CSS-свойство, служащее единственной цели — кастомизации цвета для текстового курсора в полях ввода. Текстовый курсор — это видимый маркера, в который будет вставлен следующий введённый символ. Свойство является наследуемым, поэтому его можно указать глобально или для формы, и не указывать каждому полю ввода отдельно.

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

В данном примере мы создадим форму с несколькими полями ввода, для формы зададим оранжевый цвет каретки, будет наследовать свойство от формы, для переопределим его на синий, а для параграфа с атрибутом contenteditable зададим розовый цвет каретки:

  

Зелёная каретка

form> input type="text"> textarea cols="30" rows="10">textarea> form> p contenteditable>Зелёная кареткаp>
 form  caret-color: #FF8630;> form textarea  caret-color: #2E9AFF;> form p  caret-color: #F498AD;> form  caret-color: #FF8630; > form textarea  caret-color: #2E9AFF; > form p  caret-color: #F498AD; >      

На практике

Скопировать ссылку «На практике» Скопировано

Миша Захаров советует

Скопировать ссылку «Миша Захаров советует» Скопировано

�� Добавим немного радуги в инпут:

  input type="text">      
 @keyframes rainbow  0% 20% 40% 60% 80% 100% > input:focus  animation: 3s infinite rainbow;> @keyframes rainbow  0%  caret-color: #F498AD; > 20%  caret-color: #FF8630; > 40%  caret-color: #FFD829; > 60%  caret-color: #41E847; > 80%  caret-color: #2E9AFF; > 100%  caret-color: #F498AD; > > input:focus  animation: 3s infinite rainbow; >      

Placeholder Color

Utilities for controlling the color of placeholder text.

Class reference

Properties

Usage

Control the placeholder color of an element using the .placeholder- utilities.

input class="placeholder-gray-500 border" placeholder="jane@example.com"> input class="placeholder-red-300 border border-red-400" placeholder="jane@example.com">

Changing opacity v1.4.0+

Control the opacity of an element's placeholder color using the .placeholder-opacity- utilities.

input class="placeholder-gray-500 placeholder-opacity-100 . " placeholder="jane@example.com"> input class="placeholder-gray-500 placeholder-opacity-75 . " placeholder="jane@example.com"> input class="placeholder-gray-500 placeholder-opacity-50 . " placeholder="jane@example.com"> input class="placeholder-gray-500 placeholder-opacity-25 . " placeholder="jane@example.com"> input class="placeholder-gray-500 placeholder-opacity-0 . " placeholder="jane@example.com">

Responsive

To control the text color of an element at a specific breakpoint, add a : prefix to any existing text color utility. For example, use md:text-green-600 to apply the text-green-600 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

placeholder-gray-500 sm:placeholder-red-400 md:placeholder-blue-400 lg:placeholder-green-400 xl:placeholder-orange-400" placeholder="jane@example.com">

Focus

To control the placeholder color of an element on focus, add the focus: prefix to any existing placeholder color utility. For example, use focus:placeholder-blue-600 to apply the placeholder-blue-600 utility on focus.

input class="placeholder-gray-600 focus:placeholder-gray-500 . " placeholder="jane@example.com">

Focus utilities can also be combined with responsive utilities by adding the responsive : prefix before the focus: prefix.

input class=". md:placeholder-gray-900 md:focus:placeholder-red-600 . ">

Customizing

Placeholder Colors

By default Tailwind makes the entire default color palette available as placeholder colors.

You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your placeholder colors in the theme.textColor section.

 // tailwind.config.js module.exports = theme:  - placeholderColor: theme => theme('colors'), + placeholderColor: < + 'primary': '#3490dc', + 'secondary': '#ffed4a', + 'danger': '#e3342f', + > > >

Responsive and pseudo-class variants

By default, only responsive and focus variants are generated for placeholder color utilities.

You can control which variants are generated for the placeholder color utilities by modifying the placeholderColor property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and active variants:

 // tailwind.config.js module.exports = < variants : < // . - placeholderColor : ['responsive', 'focus'] , + placeholderColor : ['responsive', 'focus', 'hover', 'active'] , > >

Disabling

If you don't plan to use the placeholder color utilities in your project, you can disable them entirely by setting the placeholderColor property to false in the corePlugins section of your config file:

 // tailwind.config.js module.exports = < corePlugins : < // . + placeholderColor : false , > >
On this page
  • Class reference
  • Usage
  • Changing opacity
  • Responsive
  • Focus
  • Customizing
  • Placeholder Colors
  • Responsive and pseudo-class variants
  • Disabling

Рабочий способ изменения цвета поля ввода Input, Placeholder & Auto-Complete

Author24 — интернет-сервис помощи студентам

Буду краток.
И так.. в первом шаблоне находятся стандартные CSS настройки поля ввода input которые можно в последующем изменить;
Ну а для ленивых я сделал второй небольшой PHP скрипт-шаблон, в котором нужно просто изменить значения в первом массиве $inputString;

Шаблон CSS (стандартный)
Кликните здесь для просмотра всего текста

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
::-webkit-input-placeholder { background-color: #fff; color: #000000 } ::-moz-placeholder { background-color: #fff; color: #000000 } :-ms-input-placeholder { background-color: #fff; color: #000000 } :-moz-placeholder { background-color: #fff; color: #000000 } input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 50px #000000 !important; -webkit-text-fill-color: #fff !important; color: #fff !important; } INPUT[type="text"] { /* outline: none; - Отключает голубой контур вокруг поля ввода */ font: 15px bold arial; background-color: #fff; color: #000000 }

Шаблон PHP (очень большой)

Кликните здесь для просмотра всего текста

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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
 $inputString = array( 'get' => array( 'background' => '#2E2E2E', /* (цвет) Фон(а) */ 'background-color' => '#2E2E2E', /* Цвет фона*/ 'color' => '#088A4B', /* Цвет текста */ 'outline' => 'none', /* Обводка вокруг input (. Касается AutoComplete . )*/ 'font' => '15px bold arial', /* Настройка шрифта */ ), ); $inputPattern = array( 'get' => array( 'pattern' => '      Fully customizable Input   ::-webkit-input-placeholder  background-color: '.$inputString['get']['background-color'].'; color: '.$inputString['get']['color'].'; > ::-moz-placeholder  background-color: '.$inputString['get']['background-color'].'; color: '.$inputString['get']['color'].'; > :-ms-input-placeholder  background-color: '.$inputString['get']['background-color'].'; color: '.$inputString['get']['color'].'; > :-moz-placeholder  background-color: '.$inputString['get']['background-color'].'; color: '.$inputString['get']['color'].'; > input:-webkit-autofill  -webkit-box-shadow: inset 0 0 0 50px '.$inputString['get']['background-color'].' !important; -webkit-text-fill-color: '.$inputString['get']['color'].' !important; color: '.$inputString['get']['color'].' !important; > INPUT[type="text"]  outline: '.$inputString['get']['outline'].'; font: '.$inputString['get']['font'].'; background-color: '.$inputString['get']['background-color'].'; color: '.$inputString['get']['color'].'; > INPUT[type="password"]  outline: '.$inputString['get']['outline'].'; font: '.$inputString['get']['font'].'; background-color: '.$inputString['get']['background-color'].'; color: '.$inputString['get']['color'].'; >      .$_SERVER['PHP_SELF'].'" method="post"> 



'
, ), ); echo $inputPattern['get']['pattern']; ?>

Дополнительно:
(НЕ РЕКЛАМА)
Ну а для самых ленивых, вот вам сервис, там можно найти как и HEX, RGB так и HSL цветовой код, так же там есть панель цветовой сочетаемости(какие цвета друг к другу подходят)
Ссылка: перейти

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *