其中設置滾動條的組成都有以下部分
- ::-webkit-scrollbar 滾動條整體部分
- ::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
- ::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
- ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
- ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
- ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
- ::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
然后：
效果圖：
代碼：
<div class="box1">
<textarea name id cols="30" rows="10"></textarea>
</div>
<style>
.box1>textarea {
height: 4rem;
width: 12%;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #244b6d;
resize: none;
color: black;
font-size: 24px
}
/* 滾動條框設置 */
.box1>textarea::-webkit-scrollbar {
width: 12px;
background-color: rgb(182, 214, 226);
}
/* 滾動條的設置 */
.box1>textarea::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: skyblue;
}
</style>