Блог

Главная - Вопросы по программированию - Используйте подстановочный знак в селекторе CSS для оформления при наличии значения

Используйте подстановочный знак в селекторе CSS для оформления при наличии значения

#css #wildcard

#css #подстановочный знак

Вопрос:

Я пытаюсь стилизовать элемент только тогда, когда у этого элемента есть атрибут value.

Атрибут value является переменным (это дата), но это единственное, что меняется между «нет значения» и «имеет значение», которое мне нужно оформить по-другому.

Можно ли использовать подстановочный знак в селекторе CSS, чтобы определить, присутствует ли атрибут value? Например:

HTML

 <input class="thing" value="variable-something">...</input>
<input class="thing">...</input>

CSS

 .thing[value="*"] {
   ...
}
OR
.thing[value=*] {
   ...
}

Я пробовал это решение, но использование " заставляет его искать определенную строку. Выполнение .thing[value=*] недопустимо и не будет компилироваться.

Любой совет?

Ответ №1:

 <input type="text" value="">
<input type="text">

input[value]{
  background: #ccc;
}

Попробуйте сами https://jsfiddle.net/55rjf0y8 /

Ответ №2:

Вы можете использовать приведенный ниже код

 input[value]{background: red;}  
 <input type="text">
<input type="text" value="">