I want to change horizontal scrollbar css

Question

I want to change horizontal scrollbar css. Here i used code for change it, but it also changed my vertical scrollbar, i want to change only horizontal scrollbar. How to do it? Here i upload image also.

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

Possible duplicate of [CSS customized scroll bar in div](https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) — Mohit Gupta, Mar 05 '19 at 05:36
Possible duplicate of [Change y-axis (horizontal) scrollbar styles](https://stackoverflow.com/questions/43738245/change-y-axis-horizontal-scrollbar-styles) — Xitish, Mar 05 '19 at 05:37
https://stackoverflow.com/questions/18871519/how-to-customize-scroll-bars-with-html-and-css/18871623 — Mohit Gupta, Mar 05 '19 at 05:37

score 3 · Answer 1 · edited Mar 05 '19 at 11:28

try this

div {
  width: 400px;
  overflow-x: auto;
  white-space: nowrap;
}

div::-webkit-scrollbar {
  width: 1em;
}

div::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #00bd86;
  outline: 2px solid slategrey;
}

div::-webkit-scrollbar:vertical {
  display: none;
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into</div>

score 1 · Answer 2 · answered Jun 25 '21 at 04:37

you have to override the scrollbar CSS maybe use class

.only-this-horizon-scrollbar {
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
}

I want to change horizontal scrollbar css

2 Answers2