2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

自定义滚动条

csshtml作者:猿2048志愿者

html↓

<div id="inp" class="test" contenteditable="true" ></div>

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;
    }

效果图
图片描述

                               (๑′ᴗ‵๑)I❤
本文来源于网络:查看 >
« 上一篇:前端每日实战:85# 视频演示如何用纯 CSS 创作一个小球反弹的动画
» 下一篇:5分钟理解BFC原理
评论
点击刷新
评论
相关博文
×添加代码片段