Как мне оформить полосу прокрутки текстовой области - PullRequest
2 голосов
/ 18 сентября 2010

У меня есть текстовое поле в контактной форме, стилизованное под css, оно прекрасно смотрится, пока я не напишу больше, чем умещается область, когда я это делаю, появляется полоса прокрутки, и эта полоса прокрутки выглядит ужасно с моим темным стилем (эточерный с белым текстом).Так, как я собирался стилизовать это?Я погуглил некоторые, но не нашел никакого хорошего ответа, только нашел все эти изменения цвета только для IE.

Ответы [ 4 ]

3 голосов
/ 18 сентября 2010

@ handsofaten: jScrollPane не работает с элементами textarea, потому что он динамически добавляет элементы div к содержимому элемента, к которому вы его применяете.Вы не можете добавить элементы div к текстовой области.

Это было бы возможно, добавив элемент-обертку к текстовой области и применив полосу прокрутки к этому родительскому элементу.Однако я бы не рекомендовал это делать, поскольку при добавлении текста в текстовую область их содержимое увеличивается, а не сама текстовая область.Вы должны применить хак к текстовой области, чтобы она росла вместе с ее содержимым.Что, вероятно, приводит к нестабильному беспорядку.

Так что я бы оставил эту идею.

Кстати: Webkit (Chrome, Safari) также поддерживает фирменный CSS-стиль оформления полос прокрутки: http://webkit.org/blog/363/styling-scrollbars/

1 голос
/ 18 сентября 2010

Проверьте этот плагин jQuery: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Я узнал об этом с этого сайта, где вы можете увидеть его в действии на их боковой панели «TribWire»: http://www.texastribune.org/

0 голосов
/ 06 октября 2010

Вы можете использовать этот скрипт http://studio.radube.com/html-textarea-custom-scrollbar и получить персонализированную полосу прокрутки textarea.

0 голосов
/ 19 сентября 2010

Вы также можете проверить http://www.css3.com. Нажмите на SCROLLBAR ... в списке.Будет ли это работать или нет, я не знаю.CSS3 пока не так хорошо поддерживается в браузерах, но, надеюсь, будет в будущем.

...