时间:2021-07-01 10:21:17 帮助过:70人阅读
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如何自定义滚动条(代码)的详细内容,更多请关注Gxl网其它相关文章!