Why can’t I change the scroll bar style of iframe in vue?

html：

<div class="basicInfo" v-if="currentTab !=3">



              <iframe width="100%" height="1116px" :src="url" frameborder="0" ref="myIframe" class="iframe"></iframe>


          </div>

css：

iframe::-webkit-scrollbar-track {
  border-radius: 10px!important;
  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

iframe::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, .3)!important;
  border-radius: 10px!important;
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

iframe::-webkit-scrollbar {
  width: 16px!important;
  height: 16px!important;
}

iframe::-webkit-scrollbar-track,
iframe::-webkit-scrollbar-thumb {
  border-radius: 999px!important;
  border: 5px solid transparent!important;
}

iframe::-webkit-scrollbar-track {
  // box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
}

iframe::-webkit-scrollbar-thumb {
  min-height: 20px!important;
  background-clip: content-box!important;
  // box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
}

iframe::-webkit-scrollbar-corner {
  background: transparent!important;
}

its Not working