How to customize scroll bars in css (code)

This article shares with you how to customize the scroll bar (code) in CSS. The content is very good. Friends in need can refer to it. I hope it can help everyone.

html↓

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

Rendering

Related recommendations:

How to use Css to achieve the effect of rounded borders

Realize css Two ways of dotted line style: dotted and dashed (example)

The above is the detailed content of How to customize scroll bars in css (code). For more information, please follow other related articles on the PHP Chinese website!