Change the color of the scrollbar with vertical menu

Question

Good morning. I have a vertical menu that is larger than the page and therefore will appear with scroll. I’m not able to change the scroll style as colors and thickness. I’ve tried everything, but I don’t understand where I’m going wrong. Follow the code I’m using.

.teste-scroll { background-color: black; scrollbar-color: #06c; }

<div class="row">
  <div class="teste-scroll">
<nav class="navbar navbar-dark teste-scroll" style="background-color: rgb(51, 51, 51); max-height: 500px; overflow-y:auto;">
  
        <button class="navbar-toggler" type="button"  data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#xxx">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#xxx">Conteúdo Premium</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Cursos On-line
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Classificados
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Fornecedores
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contato</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">Contato</a>
                      </li>
                      <li class="nav-item">
                            <a class="nav-link" href="#">Contato</a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" href="#">Contato</a>
                              </li>
                              <li class="nav-item">
                                    <a class="nav-link" href="#">Contato</a>
                                  </li>
                                  <li class="nav-item">
                                        <a class="nav-link" href="#">Contato</a>
                                      </li>
                                      <li class="nav-item">
                                            <a class="nav-link" href="#">Contato</a>
                                          </li>
                                          <li class="nav-item">
                                                <a class="nav-link" href="#">Contato</a>
                                              </li>
                                              <li class="nav-item">
                                                    <a class="nav-link" href="#">Contato</a>
                                                  </li>
                                                  <li class="nav-item">
                                                        <a class="nav-link" href="#">Contato</a>
                                                      </li>
                                                      <li class="nav-item">
                                                            <a class="nav-link" href="#">Contato</a>
                                                          </li>
                                                          <li class="nav-item">
                                                                <a class="nav-link" href="#">Contato</a>
                                                              </li>
                                                              <li class="nav-item">
                                                                    <a class="nav-link" href="#">Contato</a>
                                                                  </li>
                                                                  <li class="nav-item">
                                                                        <a class="nav-link" href="#">Contato</a>
                                                                      </li>
                                                                                                                                                                                                                                                                                                                                                                            
          </ul>
        </div>
      </nav>
    </div>
    </div>

Answer 1

Example of CSS for how to customize:

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}