textarea Scrollbar not working

Question

hi guys can help me this code not working for me I don't know why. can you suggest any code for my textarea scrollbar property.

<textarea style="scrollbar-arrow-color:pink; 
                     scrollbar-base-color:red; 
                     scrollbar-darkshadow-color:blue; 
                     scrollbar-highlightcolor:orange; 
                     scrollbar-shadow-color:green">
    </textarea>

Possible duplicate of [CSS scrollbar style cross browser](http://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser) — Alexander O'Mara, Jul 28 '16 at 00:45

score 0 · Answer 1 · answered Jul 28 '16 at 01:11

You are doing it in the wrong way. An inline style attribute can only contain property declarations, you cannot declare pseudo elements inline. So try to write your css in a style sheet and link it to your page.

These are the pseudo elements for a textarea

::-webkit-scrollbar              
::-webkit-scrollbar-button       
::-webkit-scrollbar-track        
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb        
::-webkit-scrollbar-corner       
::-webkit-resizer

A simple example could be:

::-webkit-scrollbar {
   width: 12px;
}

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

::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 }

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

<textarea id="message" rows="4" cols="50"> </textarea>

textarea Scrollbar not working

1 Answers1