Можно ли использовать атрибут входного значения в качестве селектора CSS?

Можно ли использовать селектор CSS для таргетинга на ввод, который имеет определенное значение?

Пример: как я могу настроить таргетинг на ввод ниже на основе value="United States"

  

Динамические значения (о нет! D;)

Как объясняет npup в своем ответе, простое правило css будет нацелено только на value атрибута, что означает, что это не распространяется на фактическое значение узла html.

JAVASCRIPT К СПАСЕНИЮ!


Оригинальный ответ

Да, это очень возможно, используя селектор атрибутов css, вы можете ссылаться на данные по их значению таким образом:

 input[value="United States"] { color: #F90; }​ 

• Пример jsFiddle

от ссылки

  • [att] Соответствует, когда элемент устанавливает атрибут att, независимо от значения атрибута.

  • [att = val] Сопоставьте, когда значение атрибута «att» элемента равно «val».

  • [att ~ = val] Представляет элемент с атрибутом att, значение которого представляет собой список слов, разделенных пробелами, один из которых является точно «val». Если «val» содержит пробел, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Если «val» – это пустая строка, она никогда не представит ничего.

  • [att | = val] Представляет элемент с атрибутом att, его значение либо является точно «val», либо начинается с «val», а затем «-» (U + 002D). Это в первую очередь предназначено, чтобы разрешить совпадение языка (например, атрибут hreflang для элемента a в HTML), как описано в BCP 47 ([BCP47]) или его преемника. Для сопоставления субкода языка lang (или xml: lang) см. Псевдоязык: lang.

  • ссылка селекторов атрибутов css

Возможно, если вы используете браузер, который поддерживает CSS :valid псевдоclass и атрибут проверки pattern на входах, который включает в себя большинство современных браузеров, кроме IE9.

Например, чтобы изменить текст ввода с черного на зеленый при вводе правильного ответа:

 input { color: black; } input:valid { color: green; } 
 

Which country has fifty states?

Да, но обратите внимание: поскольку селектор атрибутов (конечно) нацелен на атрибут элемента, а не на свойство значения узла DOM (elem.value), он не будет обновляться, пока поле формы обновляется.

В противном случае (с некоторыми обманами) я думаю, что это могло быть использовано для того, чтобы сделать замену CSS только для атрибута «placeholder» / функциональности. Может, это и был OP? 🙂

Как упоминалось ранее, вам нужно больше, чем селектор css, потому что он не получает доступ к сохраненному значению узла, поэтому javascript определенно необходим. Heres другое возможное решение:

   

Конечно, попробуйте:

 input[value="United States"]{ color: red; } 

Пример jsFiddle .

Освежающий атрибут событий – лучший подход, чем значение сканирования каждые десятые доли секунды …

http://jsfiddle.net/yqdcsqzz/3/

 inputElement.onchange = function() { this.setAttribute('value', this.value); }; inputElement.onkeyup = function() { this.setAttribute('value', this.value); }; 

Вы можете использовать селектор атрибутов Css3 или селектор значений атрибута.

/ Это сделает все входные данные, значение которых определено красным /

 input[value]{ color:red; } 

/ Это сделает условный выбор в зависимости от входного значения /

 input[value="United States"]{ color:red; } 

Есть другой атрибут селектора атрибутов, содержащий селектор значений,

 input[value="United S"]{ color: red; } 

Это все равно будет вводить любые данные с объединенным состоянием в виде красного текста.

Чем мы присваиваем значение начинается с селектора

 input[value^='united']{ color: red; } 

Любой входной текст начинается с ‘united’ будет иметь цвет шрифта красный

И последнее значение атрибута заканчивается селектором

 input[value$='States']{ color:red; } 

Любое входное значение заканчивается на «Штаты», цвет шрифта будет красным

  • nth-of-type vs nth-child
  • Обозначение с левой стороны вместо поля ввода
  • Полное фоновое изображение с эффектом затухания
  • Изображение в оттенках серого с помощью CSS и повторного цвета при наведении мыши?
  • Фоновая размытость с помощью CSS
  • Почему и не берут размер шрифта и размер шрифта из тела?
  • : not () не ведет себя так же между Safari и Chrome / Firefox
  • Силовой неmonoпольный шрифт в фиксированную ширину с использованием CSS
  • Отображение IE: дочерний элемент таблицы-таблицы игнорирует высоту: 100%
  • Bootstrap изменяет порядок div с помощью pull-right, pull-left на 3 столбца
  • Использование PrimeFaces с Bootstrap вызывает изменения в заполнении / калибровке / границах
  • Interesting Posts

    Как я могу удалить skype для бизнеса?

    Сравните два объекта с операторами .equals () и ==

    ?: тройное условное поведение оператора при оставлении одного выражения пустым

    Как загрузить мою программу при запуске Windows без командной консоли?

    Два запроса $ .post один за другим. Второй запрос $ .post не выполняется.

    Почему Windows не может обрабатывать переменную окружения в Path?

    Regex look-behind без очевидной максимальной длины в Java

    Котировки Android в строке запроса sql

    Хостинг внешнего приложения в окне WPF

    установка / обновление пакета: установка libv8 (therubyracer) завершается неудачно (с собственными расширениями)

    В чем разница между системой и backticks и трубами в Perl?

    Как я могу анимировать сортировку списка с помощью orderBy с помощью ng-repeat с ng-animate?

    Как запустить препроцессор GCC для получения кода после того, как macros, такие как #define, будут расширены?

    Windows 7 Virtual PC + Linux Ubuntu

    C struct hack на работе

    Давайте будем гением компьютера.