Стилизация заполнителя ввода, когда ввод только для чтения

Question

Я пытаюсь стилизовать свое свойство заполнителя ввода только тогда, когда ввод доступен только для чтения, но я не могу заставить два селектора работать вместе, возможно ли это? Я пробовал несколько вариантов, но думал, что ниже должно работать;

input:read-only + ::placeholder { color: black !important; }

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

input:read-only + ::-webkit-input-placeholder, input:read-only + ::placeholder, input:-moz-read-only + ::placeholder, input:read-only + ::-ms-input-placeholder { color: black  !important; }

Ни одна из этих работ, это возможно? Куда я иду не так?

Answer 1

Вы можете использовать следующее решение:

input[readonly]::placeholder {
  color: blue !important;
}

<input type="text" placeholder="Hey StackOverflow" readonly/>
<input type="text" placeholder="Hey StackOverflow"/>

---

Совместимость браузера / Можно ли использовать?

• https://caniuse.com/#feat=css-placeholder
• https://caniuse.com/#feat=css-read-only-write

---

Почему ваши правила CSS не работают?

Ваши правила CSS для форматирования заполнителя пытаются получить доступ к следующему заполнителю (заполнитель после элемента <input>). Заполнитель находится на самом элементе <input>, поэтому ваши правила не совпадают.

p + p {
  color:blue;
}

<p>Hello</p>
<p>StackOverflow</p>

подробнее: Объяснение знака + в правилах CSS

Answer 2

Заполнитель не является дочерним по отношению к input, поэтому в селекторе нет места.

input:read-only::placeholder {
  color: red
}

<input type="text" placeholder="You can't type here!" readonly>