Недавно столкнулся с проблемой реализации скроллбара для textarea. Вернее его кроссброузерности. И… полного решения, которое не основывается на JavaScript не нашел.

HTML и CSS привожу ниже.

Все просто, но уже на данном этапе вид textarea в броузерах разный. Вернее интересовать нас будет одинаковая работа вертикального скроллбара во всех основных броузерах.

P.S.: на внешний вид скроллбара “забьем”, попытаемся добиться хотя бы одинаковой логики работы.

За основу приймём работу скроллбара в FireFox, как самое логичное.
Сейчас скролл в броузерах выглядит так (левый скрин - незаполненный textarea; правый скрин - заполненный под завязку, до отображения (активации) скроллбара):


FireFox3:

IE7:

Opera 9.5:

Safari 3 (Win):


В FireFox2 работает аналогично FireFox3, а в IE 6 работает аналогично IE 7. Остальных “динозавров” мы не рассматриваем.

Итак, из скриншотов видно, что в IE и Opera при отсутствии текста наблюдается ненужный затененный скроллбар, от которого и попробуем избавиться.

Для IE скроллбар начинает нормально работать после добавлении CSS-правила: overflow: auto:

А вот в Opera мне так и не удалось найти решения на CSS. Понятно, что можно, используя хак для Opera и overflow: hidden убрать полосу прокрутки в Opera вообще, но это не решение.

Если у кого-то есть решение данной проблемы, пожалуйста, сообщите в комменты. Буду премного благодарен.