Как задать text-decoration-color для input?

Question

[littleguga]

Есть html:

<div class="workline"><input type="text" class="work1" id="w1"></div>

Нашел в интернете, что цвет text-decaration наследуется от родителя. В css задаю, но не работает, зачеркивание все равно остается черным цветом. Как сделать его красным?

.workline{
	color: red;
}
.work1{
	color: black;
	text-decoration: line-through;
}

Answer 1

[Юрий Горин]

По-умолчанию input не наследует свойства родительского элемента. Нужно заставить его это сделать.
jsfiddle.net/LvHWk/1

Comments

[Юрий Горин]

Работает, правда, только в Firefox'е

[littleguga]

@CoolWolf сейчас посмотрю, спасибо.

[littleguga]

@CoolWolf да, к сожалению только Firefox.

Answer 2

[littleguga]

А если через js вешать поверх png картинку с прозрачным фоном и красной полосой? Или это будет плохой костыль?

Comments

[Роман Мисюра]

Надо как минимум блоку с "картинкой" дать свойство pointer-events: none; Т.е. чтоб было как маска.

[littleguga]

@MindMinimal спасибо за информацию.

Answer 3

[Александр]

если html5 то можно использовать :after + jQuery
jsfiddle.net/ceU3N/1
но нужно учесть, что такой костыль нужно бы допилить, т. к. ширина букв разная, и по хорошему значение переменной latWidth нужно менять в зависимости от широких букв или узких

Answer 4

[Алексей]

Даже если это будет не input, все равно перечеркивание не будет другого цвета. Думаю только по средством чистого css это не возможно. Когда-нибудь может реализуют простой выбор цвета text-decoration: line-through red;
На htmlbook.ru (htmlbook.ru/css/text-decoration-color) есть описание подобного значения, но даже там сказано, что нигде оно не поддерживается, разве что -moz-text-decoration-color в мозиле. Я ради интереса даже проверил - в версии 28.0 не работает.

Такой прием работает в случае a:hover, но не с input