Как изменить цвет текста и фона в текстовом поле?
| 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 . Поскольку тег является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.
Пример 1. Цвет текста и фона в текстовом поле
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля после добавления к нему стилей
В данном примере добавляется новый класс с именем colortext , он добавляется к тегу с помощью конструкции class=»textfield» .
Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу в этом случае всегда добавляется атрибут type . Используя запись INPUT[type=»text»] задаем стиль для всех элементов , но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).
Пример 2. Использование селекторов атрибутов
Источник
Как изменять цвета с помощью элемента ввода color и переменных CSS
Дата публикации: 2019-08-07
От автора: с помощью переменных CSS и элемента ввода color мы можем легко изменять цвета — а значит, переключать темы пользовательского интерфейса в веб-приложении или на сайте. Ну, веб развивается быстро, поэтому мы можем использовать переменные CSS, которые поддерживают многие современные браузеры.
Переменные CSS — это читаемый код, который обеспечивает простоту изменения больших документов и многое другое. Пример:
С другой стороны, у нас есть , который определяет поле ввода палитры цветов. Оно отображает палитру цветов, из которой мы можем выбрать цвет, в затем передать его в качестве ввода. Пример:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Элемент ввода color
Поскольку это пользовательский элемент ввода, интерфейс палитры цветов может отличаться в разных операционных системах. Пример элемента выбора цвета в демонстрации взят из Mac OS. При этом мы не обязаны использовать плагины javascript, и это здорово.
Итак, давайте создадим тему пользовательского интерфейса.
Во-первых, нам нужно создать кнопки, например, мы можем использовать три элемента span.
Теперь нам нужно сохранить значения цвета по умолчанию для этого мы используем атрибуты data-bg-color и data-color.
Для динамичных цветов
Чтобы получить определяемые пользователем цвета темы, мы используем элемент input с типом color. Это позволяет нам получить полнофункциональную палитру цветов.
Настройка переменных CSS
Мы устанавливаем переменные CSS и их значения по умолчанию. Для этого мы используем псевдо-класс :root.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Мы установили две переменные primary-bg-color и primary-color. По умолчанию тема имеет темно-синий цвет фона и цвет текста — белый.
Использование CSS-переменных
Теперь, если мы хотим изменить background-color и color элемента, CSS выглядит следующим образом:
Переменная CSS устанавливается для элемента с помощью функции var. При этом мы можем изменить переменную, и значение для этих свойств будет обновлено автоматически.
Javascript в действии
Таким образом, используя javascript, мы можем достичь общей функциональности динамического переключения тем пользовательского интерфейса. Поэтому, когда пользователь меняет цвет из поля ввода выбора цвета, свойство переменных CSS должно изменяться автоматически.
Во-первых, давайте создадим функцию обновления темы:
Эта функция принимает объект в качестве параметра, и для каждого ключа обновляется соответствующая переменная CSS, определенная в псевдоклассе :root. Чтобы достичь этого, нам нужно определить объект таким образом, чтобы каждый ключ представлял имя переменной CSS, а каждое значение ключа представляло фактическое значение CSS, которое мы хотим применить.
Теперь нам нужно найти элементы и прикрепить обработчики событий:
Теперь, когда пользователь нажимает на элемент span, значения атрибутов данных сохраняются и устанавливаются для соответствующих им переменных CSS.
И то же самое для палитры цветов: когда пользователь изменяет значение элемента палитры цветов, для выбранного значения устанавливается соответствующая переменная CSS.
Заключение
Теперь, я надеюсь, что вы получили представление о том, как мы можем динамически изменять цвет темы на веб-сайте. Я предлагаю вам поэкспериментировать с этой функцией в вашем проекте и наслаждаться! Я надеюсь, что вы нашли этот пост очень полезным. Не стесняйтесь поделиться своими мыслями и мнениями и оставить мне комментарий, если у вас есть какие-либо проблемы или вопросы.
Автор: Nirazan Basnet
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Источник
Как изменить цвет замещающего текста поля формы
Из этого туториала Вы узнаете, как изменить цвет замещающего текста ( placeholder text color) поля формы.
Замещающий текст поля формы содержит подсказку, которая указывает ожидаемые данные в поле. Это может быть пример или краткое описание ожидаемой информации. Краткая подсказка отображается в поле до того, как пользователь начнёт вводить данные.
По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.
Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:
Составьте код в соответствии со следующей информацией (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):
Этот код изменит цвет замещающего текста для полей ввода следующих типов: текст, поиск, ссылка, телефон, адрес электронной почты, и пароль:
Следующий код изменит цвет замещающего текста для текстовой области (text area) (где, как правило, вводится основное сообщение контактной формы):
Следующий код изменит цвет замещающего текста для отдельного типа ввода, в нашем случае — адрес электронной почты (email):
Выберите файл, в который Вы добавите код. Вы можете добавить его в любой файл CSS вашего сайта, но мы приготовили для Вас список файлов, в которые рекомендуется добавлять правила CSS для разных типов движков сайтов:
Шаблоны CMS:
- Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
- Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
- Темы Drupal /sites/all/themes/themeXXX/css/style.css
- Шаблоны Web (HTML5) /css/style.css
Шаблоны E-commerce:
- Темы Magento /skin/ frontend /default/themeXXX/css/styles.css
- Темы PrestaShop /themes/themeXXXX/css/global.css
- Темы OpenCart /catalog/view/theme/themeXXX/ stylesheet / stylesheet .css
- Темы ZenCart /includes/templates/themeXXX/css/ stylesheet .css
- Шаблоны osCommerce /css/ stylesheet .css
- Шаблоны Shopify style.css.liquid
Сохраните изменения и загрузите файлы CSS на ваш сервер.
Вы можете также ознакомиться с детальным туториалом ниже:
Источник
Как изменить цвет формы css
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
HTML
CSS
PHP
WordPress
Bootstrap
Автор
Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
Всем привет!
В сегодняшнем уроке я расскажу о том, как менять цвет текста, ссылки, таблицы, рамки, фона страницы.
Ну что, вы готовы? Тогда вперед к изучению урока! 
В предыдущем уроке я выложил «Коды цветов». Вы их можете смело использовать в сегодняшнем уроке. А можете использовать 9 основных цветов без оттенков:
| #000000 |
| #FF0000 |
| #00FF00 |
| #0000FF |
| #FFFF00 |
| #00FFFF |
| #CCCCCC |
| #FF00FF |
| #FFFFFF |
| #663333 |
Цвет задается по названию цветов, по шестнадцатеричному значению и с помощью RGB.
— по названию цвета:
используя этот метод, нужно знать хорошо английский язык. Знаете название цвета на английском, можете смело вписывать его в код. Например, вот так:
— по шестнадцатеричному значению:
для определения цвета в HTML используются числа в шестнадцатеричном коде: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены на латинские буквы. Например, вот так:
— с помощью RGB:
RGB — это цветовая модель, которую тоже используют при создании графики, дизайнов сайтов, приложений и т.п. Принцип ее действия заключается в следующем: монитор на компьютере состоит из огромного количества маленьких блоков светодиодов. В каждом по три цвета – красный, зелёный, синий ( R ed G reen B lue).
Схема смешивания цветов для моделей RGB:
Интенсивность своего свечения светодиоды могут менять от 0 (не горит) и до «255» (максимально ярко). Если всем трем цветам задать параметр «0», то получится черный цвет, а если всем прописать «255» – будет белый. Меняя интенсивность свечения этих светодиодов, можно получить в итоге каких-то там 16 миллионов цветов 
Посмотрите на примерах, как работает все вышеописанное.
Цвет текста
Свойство «COLOR»
Чтобы поменять цвет заголовка (
), текста
и ссылки, воспользуйтесь правилом « color ».
Давайте закрепим выше сказанное и попробуем задать цвет тремя способами:
— по названию цвета:
-по шестнадцатеричному значению:
Теперь давайте я поменяю цвет для заголовка, текста и ссылки.
В HTML добавьте такой код:
Меняем цвет для заголовка (H1, H3, H3) в CSS:
Меняем цвет для текста в CSS:
Меняем цвет ссылки в CSS:
- visited — Стиль для посещенной ссылки
- active — Стиль для нажатой ссылки
- hover — Стиль ссылки при наведении на нее курсора
Цвет рамки
Свойство «BORDER—COLOR»
Чтобы изменить цвет рамки, воспользуйтесь правилом « border-color ».
Сейчас текст обведем рамкой.
Есть еще и сокращенный способ:
Цвет рамки таблицы
Свойство «BORDER—COLOR»
Чтобы изменить цвет рамки таблицы, воспользуйтесь таким же правилом « border-color ».
В HTML добавьте:
Цвет фона
Свойство «BACKGROUND—COLOR»
Чтобы залить другим цветом фон страницы, таблицы, блока, воспользуйтесь правилом « background-color »:
Меняем фон страницы
Если вы хотите поменять цвет фона веб-страницы, то пропишите правило « background-color » к селектору « BODY » можно и к « HTML »
Меняем фон таблицы
Если вы хотите поменять цвет фона таблицы, то пропишите правило « background-color » к селектору « td », « table »
Меняем цвет кнопки
Если нужно поменять цвет кнопки, пропишите любой класс (для примера я прописал класс « submit »):
А в CSS к селектору «submit» прописываем правило « background-color »:
Примечание
Все примеры, указанные выше, непосредственно касались всех элементов веб-страницы. То есть, если я прописал правила к заголовку « h2 », то на всех страницах будет действовать это правило для заголовка « h2 ». Если вы помните урок «Синтаксис CSS», то знаете, что можно задать правило для некоторых веб-страниц в особых моментах. Например, вы хотите только на странице контактов заголовок « h2 » сделать синим цветом.
Для этого пропишите в HTML для первого тега « h2 » класс, например, « stepkiblog ».
В CSS:
Если прописать ID :
То в CSS это будет так:
Надеюсь, что урок был для вас полезен, а самое главное – ПОНЯТНЫМ!
Если вам интересны мои уроки, и вы в дальнейшем хотите по ним обучаться, подписывайтесь на обновления моего блога.
Удачи.
Источник