当前位置:Gxlcms > css > css如何自定义滚动条(代码)

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

时间:2021-07-01 10:21:17 帮助过:70人阅读

本篇文章给大家分享的是关于css如何自定义滚动条(代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家。

html↓

  1. <p id="inp" class="test" contenteditable="true" ></p>

css↓

  1. .test {
  2. display: inline-block;
  3. margin: 60px 40%;
  4. width: 280px;
  5. padding: 5px 4px;
  6. min-height: 20px;
  7. line-height: 20px;
  8. max-height: 72px;
  9. border: 1px solid #ccc;
  10. font-size: 12px;
  11. word-wrap: break-word;
  12. overflow-x: hidden;
  13. overflow-y: auto;
  14. -webkit-user-modify: read-write-plaintext-only;
  15. border-radius: 4px;
  16. }
  17. .test::-webkit-scrollbar {
  18. width: 4px;
  19. height: 1px;
  20. }
  21. .test::-webkit-scrollbar-thumb {
  22. border-radius: 4px;
  23. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  24. background: #C8C8C8;
  25. }
  26. .test::-webkit-scrollbar-track {
  27. border-radius: 4px;
  28. background-color: #FFFFFF;
  29. }

效果图

图片描述

相关推荐:

如何使用Css实现圆角边框的效果

实现css虚线样式的两种方式:dotted和dashed(实例)

以上就是css如何自定义滚动条(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行