您好,欢迎来到意榕旅游网。
搜索
您的当前位置:首页css如何自定义滚动条(代码)

css如何自定义滚动条(代码)

来源:意榕旅游网
本篇文章给大家分享的是关于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;
 }

效果图

图片描述

Copyright © 2019- yrrf.cn 版权所有 赣ICP备2024042794号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务