Я хочу изменить горизонтальную полосу прокрутки CSS

Question

Я хочу изменить горизонтальную полосу прокрутки css.Здесь я использовал код для его изменения, но он также изменил мою вертикальную полосу прокрутки, я хочу изменить только горизонтальную полосу прокрутки.Как это сделать?Здесь я загружаю изображение также.

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

Answer 1

попробуйте

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>