本篇文章给大家分享的是关于css如何自定义滚动条（代码），内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。
html↓
<p id="inp" class="test" contenteditable="true" ></p>
css↓
.test {      display: inline-block;      margin: 60px 40%;      width: 280px;      padding: 5px 4px;      min-height: 20px;      line-height: 20px;      max-height: 72px;      border: 1px solid #ccc;      font-size: 12px;      word-wrap: break-word;      overflow-x: hidden;      overflow-y: auto;      -webkit-user-modify: read-write-plaintext-only;      border-radius: 4px;    }      .test::-webkit-scrollbar {      width: 4px;      height: 1px;    }    .test::-webkit-scrollbar-thumb {      border-radius: 4px;      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);      background: #c8c8c8;    }    .test::-webkit-scrollbar-track {      border-radius: 4px;      background-color: #ffffff;    }
效果图
相关推荐：
如何使用css实现圆角边框的效果
实现css虚线样式的两种方式：dotted和dashed（实例）
以上就是css如何自定义滚动条（代码）的详细内容。