css如何自定义滚动条(代码)
程序员文章站
2022-03-26 23:38:12
...
本篇文章给大家分享的是关于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虚线样式的两种方式:dotted和dashed(实例)
以上就是css如何自定义滚动条(代码)的详细内容,更多请关注其它相关文章!