::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb ?滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track ?滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
直接上代码，不讲解。
这些网上都可以查的到。
我这里分享的代码，基本是我用得到的，分享到这里，方便以后复制粘贴。
参考网址：https://css-tricks.com/custom-scrollbars-in-webkit/
效果图：
html代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css自定义滚动条样式，自定义文字选择样式，设置文字不被选择</title> ???<style> ???????/*清除所有滚动条样式*/ ???????/*::-webkit-scrollbar {*/ ???????????/*height: 0;*/ ???????????/*width: 0;*/ ???????????/*display: none;*/ ???????????/*background-color: transparent;*/ ???????/*}*/ ???????/*::-webkit-scrollbar{width:12px;}*/ ???????/*::-webkit-scrollbar-track{background-color: rgba(255,70,78,0.2);-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); ?} !*背景*!*/ ???????/*::-webkit-scrollbar-thumb{background-color:#ff464e;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1); ?border-radius: 6px;} ?!*颜色*!*/ ???????/*::-webkit-scrollbar-thumb:hover {background-color:#9c3} ?!*hover*!*/ ???????/*::-webkit-scrollbar-thumb:active {background-color:#00aff0} !*active*!*/ ???????/* ???????* ?背景颜色 ???????*/ ???????body::-webkit-scrollbar{width:12px;height:12px;} ???????/*body::-webkit-scrollbar-track{background-color: rgba(255,70,78,0.2);-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); ?} !*背景*!*/ ???????/*body::-webkit-scrollbar-track-piece:start {background:red;}!*上半部分背景轨迹*!*/ ???????/*body::-webkit-scrollbar-track-piece:end {background:yellow;} !*下半部分背景轨迹*!*/ ???????body::-webkit-scrollbar-thumb{background-color:#ff464e;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5); ?border-radius: 6px;} ?/*滚动条颜色*/ ???????body::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4);} ??/*鼠标离开浏览器时的滚动条颜色*/ ???????body::-webkit-scrollbar-thumb:hover {background-color:#9c3} ?/*hover*/ ???????body::-webkit-scrollbar-thumb:active {background-color:#00aff0} /*active*/ ???????/* ???????* 按钮 ???????*/ ???????body::-webkit-scrollbar-button{background:red;} ???????body::-webkit-scrollbar-button:hover{background-color:#9c3} ???????body::-webkit-scrollbar-button:active{background-color:#00aff0} ???????body::-webkit-scrollbar-button:vertical:start{ ?/*滚动条向上按钮*/ ???????????background:green; ???????????/*放一个向上的背景图片*/ ???????} ???????body::-webkit-scrollbar-button:vertical:end{ ??/*滚动条向下按钮*/ ???????????background:yellow; ???????????/*放一个向下的背景图片*/ ???????} ???????::-moz-selection {background:#ff464e; color:#fff;} ???????::-webkit-selection {background:#ff464e; color:#fff;} ???????::selection {background:#ff464e; color:#fff;} ???????.no-select p{ ???????????-moz-user-select:none; ???????????-webkit-user-select:none; ???????????user-select:none; ???????} ???</style></head><body> ???<div> ???????<p>1</p> ???????<p>2</p> ???????<p>3</p> ???????<p>4</p> ???????<p>5</p> ???????<p>6</p> ???????<p>7</p> ???????<p>8</p> ???????<p>9</p> ???????<p>10</p> ???????<p>11</p> ???????<p>12</p> ???????<p>13</p> ???????<p>14</p> ???????<p>15</p> ???????<p>16</p> ???????<p>17</p> ???????<p>18</p> ???????<p>19</p> ???????<p>20</p> ???</div> ???<div class="no-select" style="height:300px;overflow: scroll;"> ???????<p>这里不能被选择</p> ???????<p>ppp1</p> ???????<p>ppp2</p> ???????<p>ppp3</p> ???????<p>ppp4</p> ???????<p>ppp5</p> ???????<p>ppp6</p> ???????<p>ppp7</p> ???????<p>ppp8</p> ???????<p>ppp9</p> ???????<p>ppp10</p> ???</div></body></html>css自定义滚动条样式，自定义文字选择样式，设置文字不被选择
原文地址：https://www.cnblogs.com/huoan/p/8341304.html