2016-07-28 16 views
0

Hi Leute können mir helfen, dass dieser Code nicht funktioniert für mich Ich weiß nicht warum. können Sie einen Code für meine Textbereich-Scrollbar-Eigenschaft vorschlagen.textarea Scrollbar funktioniert nicht

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

Mögliche Duplikat [CSS Scrollbar Artkreuz Browser] (http://stackoverflow.com/questions/7725652/css-scrollbar-style-cro ss-browser) –

+0

http://jsfiddle.net/5GCsJ/954/ hier klicken. – Ranjan

Antwort

0

Sie tun es auf die falsche Weise. Ein Inline-Stil-Attribut kann nur Eigenschaftsdeklarationen enthalten, Sie können Pseudo-Elemente nicht inline deklarieren. Versuchen Sie also, Ihre CSS in einem Stylesheet zu schreiben und verknüpfen Sie sie mit Ihrer Seite.

Dies sind die Pseudo-Elemente für einen Textbereich

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

Ein einfaches Beispiel könnte:

::-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>