Можно ли использовать атрибут входного значения в качестве селектора 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; } 

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

  • Поддерживает ли Firefox позицию: относительная по элементам таблицы?
  • Есть ли родительский селектор CSS?
  • Как использовать инструкции if в LESS
  • CSS / HTML: Каков правильный способ сделать текст курсивом?
  • Прозрачность CSS3 + gradleиент
  • Ориентация только на Firefox с помощью CSS
  • Чистый CSS-сбой / расширение div
  • Несколько classов CSS: свойства Перекрытие на основе определенного порядка
  • Css Content, Attr и Url в том же предложении
  • Проблема Webkit CSS Animation - сохранение конечного состояния анимации?
  • Есть ли способ использовать две тени CSS3 для одного элемента?
  • Давайте будем гением компьютера.