修改网页原生滚动条

在浏览器中，原生的滚动条样式一般都不太好看，为了用户使用体验，一般都会更改原生的滚动条样式。

通过CSS该表原生滚动条的样式。

效果对比图：

原生：                                                                        美化:

                   

 

代码：

设texta为文本域的ID值

通过ID选择器修改样式

#texta::-webkit-scrollbar {

   width: 7px;/*滚动条宽度*/

    height:7px;

}

#texta::-webkit-scrollbar-thumb {

   border-radius: 3px;/*滚动条圆角*/

  -webkit-border-radius: 3px;/*兼容圆角属性*/

  background-color: #c3c3c3;/*滚动条颜色*/

}

#texta::-webkit-scrollbar-track {

   background-color: transparent;/*滚动条的背景颜色*/

}