WordPress默认的浏览器侧边栏滚动条是非常丑陋的，当然，有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化，有些WordPress主题是没有美化侧边滚动栏的，那么这时就需要我们去美化啦！星语站长今天就教大家如何自定义美化侧边滚动栏。其实非常简单，只需一句代码的事情就可以自定义美化WordPress侧边滚动栏，并且代码适用于绝大多数WordPress主题。
食用方法
一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦！
如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外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; } 彩色滚动条代码： /**彩色滚动条样式*/ ::-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; }
免责声明：
使用本站资源的用户均应仔细阅读本声明。用户使用本站资源的行为将被视为对本声明全部内容的认可。
1、本站资源大部分搜集于网络，整理并分享。用户可自行搜索在其他地方下载，也可选择在本站下载。如果侵犯了您的合法权益，请联系:diy945945@111.com 及时删除。本站资源仅用于研究、学习之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
2、本站对发布的资源不能保证其完整性、安全性和可用性。请您在下载后自行检查。您在使用过程中遇到的任何问题与本站无关。
3、注册本站以及在本站充值、开通会员等消费行为仅作为用户本人对本站的友情赞助，均为用户本人的自愿行为。相当于您是自愿赞助本站的服务器以及运营维护费用，而不是购买本站的任何服务与资源，请知悉！！！
4、本站资源资源采用网盘分享，如链接失效，请及时联系。
5、原文链接：https://www.xxziyuan.top/3259.html，转载请注明出处。
评论0