WordPress的默认浏览器侧边栏滚动条非常难看。 当然,有些WordPress主题带有美化的水平滚动条,所以你不必自己美化它。 一些 WordPress 主题没有美化的侧滚动条。 ,那你现在就需要美化它了! 今天我就教大家如何自定义侧滚动条,并且让它变得漂亮。 其实很简单。 只需一行代码即可自定义和美化您的 WordPress 侧滚动条,适用于大多数 WordPress 主题。
通用主题带有自定义代码来配置主题。 只需将其添加到主题设置中的自定义 CSS 代码中即可。 美化的CSS代码可以美化!
如果你的主题没有任何自定义代码,请在你的WordPress主题目录文件中找到style.css文件,或者在外观->自定义->找到美化的CSS代码。 将 CSS 添加到 WordPress 后端会非常漂亮。
单色滚动条码:
/*滚动条显示样式*/ ::-webkit-scrollbar-thumb{ 背景颜色: #FF6666; /*选择你喜欢的十六进制颜色*/ height: 50px;轮廓偏移:-2px;轮廓:2px实线#fff; border: 2pxsolid #fff; } /*滚动条大小*/ ::-webkit-scrollbar{ width:8px; height:8px; } /*滚动框背景样式*/ ::-webkit-scrollbar-track -piece{background -color:#fff; -webkit-border-radius:0; }
彩色滚动条码:
/**Aya颜色滚动条样式*/::-webkit-scrollbar { width: 10px; height: 1px;}::-webkit-scrollbar-thumb {background-color: #12b7f5; , rgba(255, 93, 143, 1) 25%, 透明 25%, 透明 50%, rgba(255, 93, 143, 1) 50%, rgba(255) , 93, 143, 1) 75%, 透明 75%, 透明);}::-webkit-scrollbar-track { -webkit-框阴影:插入 0 0 5px rgba(0,0,0,0.2);背景: #f6f6f6;}