滚动条的颜色仍然保持不变

Question

功能

拥有一个文本容器，用户可以滚动查看更多文本。滚动条假设显示颜色#cab34e。

我做了什么：

我尝试在CSS中实现背景颜色并使用:-webkit-scrollbar-thumb。

问题： 滚动条颜色仍然保持不变。滚动条的背景颜色仍为默认颜色。

因此，我做错了什么？

＆＃13;

＆＃13;

.Container {
  position: absolute;
  top: 383px;
  left: 602px;
  height: 458px;
  width: 766px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  overflow-y: scroll;
}
.innerScroll::-webkit-scrollbar-thumb {
  background-color: #cab34e;
  border-radius: 15px;
}
.innerScroll::-webkit-scrollbar-thumb:hover {
  background-color: #cab34e;
}
.innerScroll::-webkit-scrollbar-thumb:active {
  background-color: #cab34e;
}
.context {
  position: relative;
  width: 730px;
  font-size: 23px;
  font-family: FuturaLTBook;
  text-align: justify;
  color: #ffffff !important;
  overflow: hidden;
}

＆＃13;

<div class="Container">
  <div class="innerScroll">
    <div class="context">
      <p><font face="FuturaBook">TEST TEXT......</font>
      </p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;