Как обойти текст opacity?

Question

[Андрей Васоц]

Свои input сделал прозрачными (opacity 0.1). Текст в инпутах задан через placeholder. Подскажите, как сделать так, чтоб текст был "поверх" прозрачности? То есть, чтоб он был нормального черного цвета?

Comments

[Ярослав Иванов]

Гугли про label для инпута

Answer 1

[link_irk]

Нужно писать свою реализацию плейсхолдеров. Обернуть инпуты в div с position: relative. Дать "своим плейсхолдерам" абсолютное позиционирование и выставить значение z-index выше, чем у полупрозрачного элемента.
Что-то типа такого: https://jsfiddle.net/z98vch50/1/
Или же можно указать у инпута не opacity, а background-color с альфа-каналом. Что-то типа: background-color: rgba(255, 255, 255, .2)

Answer 2

[Максим Тимофеев]

opacity применяется к блоку и всему его содержимому. Поэтому придется вынести текст отдельно, положить в span и наехать на input