修改网页原生滚动条
在浏览器中,原生的滚动条样式一般都不太好看,为了用户使用体验,一般都会更改原生的滚动条样式。
通过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;/*滚动条的背景颜色*/
}