WordPress默认浏览器侧边栏滚动条有点丑，当然，个别WordPress主题是自带美化的侧边滚动栏无需我们自己美化，有些WordPress主题是没有美化侧边滚动栏，没有怎么办呢，我们自己美化！草莓互联站长就教大家自定义美化侧边滚动栏。非常简单，一句代码的事情就可以完成自定义美化WordPress侧边滚动栏，代码适用于绝大多数WordPress主题，并且该美化方案也适用于代码高亮的滚动条。

教程开始

一般主题都会自带自定义代码这样主题设置的，只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦！

单颜色的滚动条css代码

/*滚动条显示样式*/  

::-webkit-scrollbar-thumb{

   background-color:#FF6666;  /*更改喜欢的十六进制颜色*/

   height:50px;  

   outline-offset:-2px;  

   outline:2px solid #fff;  

   -webkit-border-radius:4px;  

   border: 2px solid #fff;  

}  

/*滚动条大小*/ 

::-webkit-scrollbar{  

   width:8px;  

   height:8px;  

}  

/*滚动框背景样式*/  

::-webkit-scrollbar-track-piece{  

   background-color:#fff;  

   -webkit-border-radius:0;  

}

彩色的滚动条css代码

/**彩色滚动条样式*/

::-webkit-scrollbar {

  width: 10px;  

  height: 1px;

}

::-webkit-scrollbar-thumb {

  background-color: #12b7f5;

  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);

}

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: #f6f6f6;

}