Text-shadow в IE lt 10 для кнопки и input[text]

[only_dimon]

Доброго времени суток уважаемые форумчане.

Реализовать text-shadow для статичного текста в ранних IE не проблема, благо есть фильтры, плагины jQuery и техника подложки.

Столкнулся с проблемами добавления text-shadow тексту на кнопке и в поле ввода.

1. Кнопка

Условия: кнопка с градиентом, тенью и текстом с тенью. Скриншот

Попытки:

a) Реализовать просто <a>: не универсально при желании использовать input[button], фильтры и плагин jqueryTextShadow создают тень для всего блока <a>, не только текста.

б) Реализовать <а><span>text</span></a>: опять же не подходит для input[button] и span блокирует ховеры и клики по кнопке в IE (сделать его прозрачным - не будет текста, сделать z-index - 1 - не будет видно за заливкой).

c) Реализовать

<span class="button_green"><input type="button" class="action" /><span class="text">Перенесите меня обратно</span><span class="bg"></span></span>

.action - прозрачная кнопка или ссылка на всю площадь контейнера с z-index: 10

.text - текст с тенью c z-index: 5

.bg - блока на всю площадь контейнера с заливкой и тенью z-index: 1

Расположение получилось как надо: кнопка с действием наверху, под ней текст с тенью, а под ним заливка.

Но!

Проблема в реализации ховеров, эктивов и фокусов.

.button_green .action:hover + .text + .bg {}

не работает нигде

.button_green:hover .bg {}

не работает в IE, так как .action закрывает собой родителя полностью

Больше ломать голову сил нету. Давайте ломать вместе или может есть решение проще, а я упустил.

2.

input[type=text], input[type=password]

Условия: текст с тенью в IE. Скриншот

Попытку реализации еще не сделал: создать поверх div с content editable и необходимым дизайном. по средствам JS синхронизовать изменение текста. Есть ли способ проще? И может быть вообще без JS?

Заранее спасибо за ответы.

Edited June 7, 2013 by only_dimon