Как мне отформатировать стиль полосы прокрутки для текстовой области?

Question

Я уверен, что это не должно быть так сложно, как кажется ... Я не могу использовать область прокрутки JQuery, потому что мне нужно, чтобы она работала как текстовая область стандартной формы при отправке ... должна работать в IE7 +, Safari & firefox хотя бы ... есть идеи?

Пробовал это ...

textarea {
    scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

... но работает только в IE?

Есть идеи?

Answer 1

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

Я думаю, что вы идете по правильному пути, хотя свойства полосы прокрутки должны быть в теле css следующим образом:

body {
 scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

Возможно, вы могли бы попытаться задать желаемую текстовую область и свойство idи применить это в CSS, так:

textarea.(insertrelevantID) {
.....
}

Answer 2

Использование -webkit-scrollbar псевдоэлементов для полосы прокрутки:

textarea::-webkit-scrollbar {
    width: 1em;
}

textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

textarea::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

Подробнее вы можете найти здесь: https://css -tricks.com / almanac / properties / s / полоса прокрутки /

Answer 3

Вы можете использовать этот скрипт:

http://studio.radube.com/html-textarea-custom-scrollbar

Однако, я думаю, у вас всегда будут проблемы с стилизацией полосы прокрутки textarea в чистом CSS из-за того факта, что браузер отображает это, однакоэто нравится.