html - 如何使用 CSS <select> 使每个选项的宽度与其内容一样长

Question

我正在努力使选项下拉菜单后面没有框，并且每个选项(包括顶部的选定选项)的背景都与其宽度一样长。这是我到目前为止所拥有的，根本不起作用:

.dropdownInline{
       border: 0px !important;
       color:  #E17841;
       padding: 0px;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: #fff;
      background-position: 78px 10px;
      width: 100px;
      text-indent: 0.01px;
      text-overflow: "";
      font-family: aleo;
      font-size: 33px;
    display: inline-block;
    outline: 0px;
    width: ??? ;
}

Answer 1

您是否正在尝试实现与此类似的 FIDDLE?

如果是，您可以使用appearance:none，但它仅在 chrome、ff 和 safari 中受支持。

select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color:#eee;
    border:none;
}