您可以查看jQTransform

这里有一个很好的tutorial on creating custom drop-down。
JQTransform（Olafur建议的）对我来说已经足够了。但如果你需要更多的控制，如添加图标，值得看看教程。

这可能是矫枉过正;但是SproutCore提供了由图像组成的输入元素，而不是由原生HTML元素组成的输入元素。可能还有其他框架可以做类似的事情。
基本的想法是创建一个div或其他东西，就像CrazyJugglerDrummer建议的那样，并在上面放置单击处理程序。处理程序设置动画以模拟选择元素。当选择了一个伪选择项时，您可以使用JavaScript将该值发送到隐藏的实际select或input元素。

是的，你必须做下面的代码来应用这个

document.addEventListener("click", function(event) {
  var dropdown = document.getElementsByClassName("newdropdown-selecetd")[0];
  var dropdownContent = document.getElementById("dropdown-content");
  var dropdownBtn = document.getElementById("dropdown-btn");

  if (!dropdown.contains(event.target)) {
    dropdownContent.classList.remove("show");
  }
});

function toggleDropdown() {
  var dropdownContent = document.getElementById("dropdown-content");
  dropdownContent.classList.toggle("show");
}

function selectOption(option) {
  document.getElementById("dropdown-btn").textContent = option;
  toggleDropdown(); // Close the dropdown after selecting an option
}

.newdropdown-selecetd {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f5fcff;
  min-width: 160px;
      border: 1px solid #1aa0e2 ;
  z-index: 1;
  border-radius: 3px;
}

.dropdown-content a {
    color: #5e7891;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    color: #1aa0e2;
}
.dropdown-content.show {
  display: block;
}
.active-one {
  background: #aba8a8;
  color: #fff !important;
}
.dropdown-content a.active-one:hover {
  background: #aba8a8;
  color: #fff !important;
}
span#dropdown-btn {
    position: relative;
    color: #5e7891;
    padding: 8px 10px;
    border: 1px solid #0083cc;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    height: 11px;
    background-color: #f5fcff;
    font-size: 14px;
    font-family: 'Roboto Condensed', Arial,'Nimbus Sans L','Helvetica CY',sans-serif;
    line-height: 12px;
    width: 152px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 38px;
    max-width: 152px;
    box-sizing: border-box;
    height: 29px;
      border-radius: 4px;
}

span#dropdown-btn:before {
    content: "";
    background: #1aa0e2;
    height: 27px;
    width: 31px;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #0083cc;
}
span#dropdown-btn:after {
    position: absolute;
    content: "";
    top: 12px;
    right: 10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: #fff transparent transparent;
}

<div class="newdropdown-selecetd">
  <span class="dropbtn" id="dropdown-btn" onclick="toggleDropdown()">Dropdown </span>
  <div class="dropdown-content" id="dropdown-content">
    <a href="#" onclick="selectOption('Option 1')">Option 1</a>
    <a href="#" onclick="selectOption('Option 2')" class="active-one">Option 2</a>
    <a href="#" onclick="selectOption('Option 3 with long name')">Option 3 with long name</a>
    <a href="#" onclick="selectOption('Option 4')">Option 4</a>
    <a href="#" onclick="selectOption('Option 5')" class="active-one">Option 5</a>
  </div>
</div>