修改滚动条的默认样式

效果图如下：

代码如下：

  <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .outbox{
            margin: 100px;
            width: 280px;
        }
        .header{
            width: 100%;
            line-height: 45px;
            border: 1px solid #d9d9d9;
            text-indent: 1rem;
            color: #ccc;
            cursor: pointer;
        }
        .list{
            margin-top: 4px;
            width: 100%;
            height: 260px;
            overflow-y: auto;
            border: 1px solid #d9d9d9;
        }

        /* 滚动条样式 */
        .list::-webkit-scrollbar {
			width: 4px;
			height: 4px;
		}

    
		.list::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px rgba(180, 179, 179, 0.2);
			background: red;   
		}

		.list::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px rgba(221, 221, 221, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);

		}
        .inp-select{
            width: 100%;
           
        }
        .inp-select li{
            width: 100%;
            line-height: 40px;
            font-size: 18px;
            text-align: center;
            background:skyblue;
            transition: all .3s;
            
        }
        .inp-select li:hover{
            background:pink;
            color: #fff;
        }

    </style>

<div class="outbox">
        <div class="header">请输入内容</div>
        <div class="list">
            <ul class="inp-select">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
            </ul>
        </div>
    </div>

重要代码解释如下：（给谁设置的overflow：scroll就添加给谁）

下面就讲解滚动条几个属性，主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式