How to customize scroll bars in css (code)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to customize scroll bars in css (code)

不言

Jul 21, 2018 am 11:50 AM

csshtml

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

How to customize scroll bars in css (code)

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Understanding How Reducers are Used in ReduxApr 15, 2025 am 10:08 AM

A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change. We have tools, like Redux,

Netlify CMS Open AuthoringApr 15, 2025 am 10:07 AM

I like the term "Git-backed CMS." That term works for an emerging style of CMS that looks and behaves much like any other CMS, with a fascinating twist: it

Some Things You Oughta Know When Working with Viewport UnitsApr 15, 2025 am 10:05 AM

David Chanin has a quickie article summarizing a problem with setting an element's height to 100vh in mobile browsers and then also positioning something on

Show Search Button when Search Field is Non-EmptyApr 15, 2025 am 10:00 AM

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input () when that placeholder is present.

The Trick to Animating the Dot on the Letter 'i'Apr 15, 2025 am 09:55 AM

Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate

Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window APIApr 15, 2025 am 09:53 AM

In this week's roundup: "Add to home screen" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how

Making a Chart? Try Using Mobx State Tree to Power the DataApr 15, 2025 am 09:49 AM

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Blocking Third-Party Hands from the Cookie JarApr 15, 2025 am 09:48 AM

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

See all articles