Làm cách nào để định dạng kiểu thanh cuộn trên vùng văn bản?

Question

Tôi chắc rằng điều này không quá khó khăn vì có vẻ như ... Tôi không thể sử dụng thanh cuộn JQuery vì tôi cần nó để hoạt động dưới dạng văn bản biểu mẫu chuẩn khi được gửi .. cần hoạt động trong IE7 +, Safari & firefox ít nhất ... bất kỳ ý tưởng nào?

Cố gắng này ...

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; 
} 

... nhưng chỉ hoạt động trong IE?

Bất kỳ ý tưởng nào ??

Answer 1

Tôi chưa bao giờ làm điều này nên tôi không hoàn toàn chắc chắn về điều này, nhưng tôi nhớ một đồng nghiệp của tôi đã làm điều này cho một trang web mà chúng tôi đang phát triển và ông ấy có cùng một vấn đề nhỏ.

Tôi nghĩ rằng bạn đang cùng đi đúng hướng, mặc dù các tài sản thanh cuộn cần phải được trong css cơ thể như vậy:

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; 
} 

Có lẽ bạn có thể thử cho vùng văn bản và id mong muốn sở hữu và áp dụng trong css, vì vậy:

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

Answer 2

Bạn có thể sử dụng kịch bản này:

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

Tuy nhiên, tôi nghĩ rằng bạn sẽ luôn gặp phải vấn đề với việc tạo kiểu dáng một thanh cuộn textarea trong CSS tinh khiết do thực tế trình duyệt hiển thị nó theo mặc định.

Answer 3

Sử dụng -webkit-scrollbar giả yếu tố cho thanh cuộn:

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; 
} 

Bạn có thể tìm thêm chi tiết ở đây: https://css-tricks.com/almanac/properties/s/scrollbar/