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

Ответ 1

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

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

JAVASCRIPT К СПАСЕНИЮ!

• Ужасно обходное решение: http://jsfiddle.net/QmvHL/

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

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

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

& bull; Пример jsFiddle

из ссылки

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

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

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

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

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

Ответ 2

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

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

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

<p>Which country has fifty states?</p>

<input type="text" pattern="^United States$">

Ответ 3

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

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

Ответ 4

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

<style>
input:not([value=""]){
border:2px solid red;
}
</style>

<input type="text" onkeyup="this.setAttribute('value', this.value);"/>

Ответ 5

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

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

Пример jsFiddle.

Ответ 6

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

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

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

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

Ответ 7

Вы можете использовать селектор атрибутов 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;
}

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