CSS/SCSS自定義下拉樣式問題:外觀:none屬性在MacOS的任何瀏覽器上都不起作用。我錯過了什么？

我試圖制作一個自定義下拉菜單，在實際選項旁邊的圓圈中顯示每個項目的顏色。然而，無論我做什么，默認的MacOS下拉菜單都會出現(如下圖)。我已經使用了appearance: none屬性以及webkit和Mozilla變體，但它們都不起作用，我不知道如何覆蓋它。

我嘗試了十幾種不同的方式重新排序，嘗試了三種外觀屬性的所有可能的組合，但都沒有成功。

這是我正在使用的臨時測試樣式，如果有幫助的話，請讓我知道我是否遺漏了一些明顯的東西。

select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      
      background-color: transparent;
      border: none;
      padding: 10px;
      font-size: 16px;
      color: #000;
      cursor: pointer;
    }