Detailed explanation of setting the scroll bar color of CSS example scrollbar-CSS Tutorial-php.cn

Detailed explanation of setting the scroll bar color of CSS example scrollbar

黄舟

Release： 2017-07-03 11:23:50

Original

2451 people have browsed it

Positive CSS example---scrollbar scroll bar color setting

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
*********************
<STYLE>{
SCROLLBAR-FACE-COLOR:#3399cc; 
SCROLLBAR-HIGHLIGHT-COLOR: white; 
SCROLLBAR-SHADOW-COLOR: white; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-BASE-COLOR:#dff0c0}
</STYLE>

Copy after login

Among them SCROLLBAR-FACE-COLOR, SCROLLBAR-HIGHLIGHT-COLOR, SCROLLBAR-SHADOW-COLOR, SCROLLBAR-ARROW-COLOR, SCROLLBAR -BASE-COLOR and SCROLLBAR-DARKSHADOW-COLOR are used to specify the colors of different parts of the scroll bar (you will know what parts of the scroll bar they represent based on their meaning).
Just add these lines of code between the HTML codes of the page! ! ! !
：)

##****************************** *******************

The scroll bar is the vertical (horizontal) bar on the right side (bottom) of the web page. The color of the scroll bar can be changed by writing a CSS style sheet. This page uses green scroll bars.

Scroll bar CSS style sheet:

 <style>
BODY {
   scrollbar-face-color: #008000;
   scrollbar-highlight-color: #0B0E2F;
   scrollbar-3dlight-color: #0B0E2F;
   scrollbar-darkshadow-color: #0B0E2F;
   scrollbar-shadow-color: #003366;
   scrollbar-arrow-color: #003366;
   scrollbar-track-color: #FFFFFF;}
</style>

Copy after login

The role of the CSS style sheet is to control the website Font style, color style, mouse style
starts with .

The green code
scrollbar-face-color: #008000;--The color of the scroll bar bar scrollbar-highlight-color: #0B0E2F;--Color of scroll bar highlight
scrollbar-3dlight-color: #0B0E2F;--Color of scroll bar 3D
scrollbar-darkshadow-color: #0B0E2F;--Color of scroll bar dark shadow
scrollbar-shadow-color: #003366;--The color of the scroll bar shadow
scrollbar-arrow-color: #003366;--The color of the scroll bar arrow
scrollbar-track-color: #FFFFFF;} --The color of the scroll bar background

????
????
"
#008000" is The three primary color codes of colors can be adjusted and replaced by different colors at will.

****************************************** *******************************

<STYLE>  
BODY  {  
SCROLLBAR-FACE-COLOR:  #fc0000;  
 SCROLLBAR-HIGHLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-SHADOW-COLOR:  #fc0000;  
 SCROLLBAR-3DLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-ARROW-COLOR:  #fcfc00;  
 SCROLLBAR-TRACK-COLOR:  #fc4800;  
 SCROLLBAR-DARKSHADOW-COLOR:  #fc0000;  
 SCROLLBAR-BASE-COLOR:  #fc0000  
}  
</STYLE>

Copy after login

******************************************* ************************

body {
font-size:9pt;
color:#000099; cursor:url(meng.cur);
OVERFLOW-X
: auto; OVERFLOW: scroll;
SCROLLBAR-FACE-COLOR: #817af3;
SCROLLBAR-HIGHLIGHT-COLOR: #817af3;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #817af3;
SCROLLBAR-ARROW-COLOR: #e8f7e6;
SCROLLBAR-TRACK-COLOR: 817af3
SCROLLBAR-DARKSHADOW-COLOR: #e8f7e6;
}

Copy after login

332 Split screen scroll bar color setting

Delete all other scroll bar codes and only add the following code. Each corresponding color is explained.

 set
Time
out(function setScrollbar(){      //color=Array
(面部颜色,上左斜面,下右斜面,上左边沿,箭头,底版色,下右边沿)      
color=Array("#EDE6DA","#EDE6DA","#EDE6DA","#EDE6DA","#84674A","#EDE6DA","#EDE6DA");      
box=Array("u","u1","d","r")
      for (var i=0;i<box.length;i++){            
eval("parent."+box[i]+".
document
.body.style.scrollbarFaceColor=color[0]");            
eval("parent."+box[i]+".document.body.style.scrollbarHighlightColor=color[1]");            
eval("parent."+box[i]+".document.body.style.scrollbarShadowColor=color[2]");
            eval("parent."+box[i]+".document.body.style.scrollbar3dLightColor=color[3]");            
eval("parent."+box[i]+".document.body.style.scrollbarArrowColor=color[4]");            
eval("parent."+box[i]+".document.body.style.scrollbarTrackColor=color[5]");
            eval("parent."+box[i]+".document.body.style.scrollbarDarkShadowColor=color[6]");      
};
setTimeout("setScrollbar()",300); 
},300);

Copy after login

The above is the detailed content of Detailed explanation of setting the scroll bar color of CSS example scrollbar. For more information, please follow other related articles on the PHP Chinese website!