如何僅以大寫形式顯示下拉菜單的所選值？

Question

我要在小寫情況下顯示下拉菜單的所有其他選項，但“所選”除外。 所選的一項應以大寫形式顯示。

select{
  text-transform: uppercase;
}
option{
  text-transform: lowercase !important;
}

我認為，我們無法設置選項元素的樣式。 除了自定義下拉菜單以外，還有其他選擇嗎？

由於ipad的默認行為與我的預期相同，因此在ipad中可以正常工作。 但這在android中不好。

您可以在此小提琴中看到下拉菜單。

Answer 1

您可以使用jQuery text()函數：

 $("select").change(function () { $(this).find("option").text(function (i, text) { return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase() }); }).trigger("change"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>One</option> <option>Two</option> </select>