如何删除firefox默认的输入html下拉菜单

select {
  appearance: none;
  /* 添加自定义样式 */
}

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<script>
  var select = document.getElementById("mySelect");
  select.style.display = "none"; // 隐藏默认下拉菜单

  // 创建自定义下拉菜单
  var customSelect = document.createElement("div");
  customSelect.className = "custom-select";
  customSelect.innerHTML = '<span class="selected-option">请选择</span><ul class="options"><li>选项1</li><li>选项2</li><li>选项3</li></ul>';

  // 添加事件监听器，实现下拉菜单的显示与隐藏
  customSelect.addEventListener("click", function() {
    this.classList.toggle("open");
  });

  // 添加事件监听器，实现选项的选择
  var options = customSelect.querySelectorAll(".options li");
  for (var i = 0; i < options.length; i++) {
    options[i].addEventListener("click", function() {
      var value = this.textContent;
      var selectedOption = this.parentNode.parentNode.querySelector(".selected-option");
      selectedOption.textContent = value;
      customSelect.classList.remove("open");
    });
  }

  // 插入自定义下拉菜单
  select.parentNode.insertBefore(customSelect, select.nextSibling);
</script>

<style>
  /* 自定义下拉菜单样式 */
  .custom-select {
    position: relative;
    display: inline-block;
    width: 200px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .selected-option {
    display: block;
    padding: 10px;
    background-color: #f9f9f9;
  }

  .options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    display: none;
  }

  .options li {
    padding: 10px;
    cursor: pointer;
  }

  .options li:hover {
    background-color: #f2f2f2;
  }

  .custom-select.open .options {
    display: block;
  }
</style>