Как отобразить выбранное значение раскрывающегося списка в верхнем регистре?

Question

Я хочу отобразить все остальные варианты выпадающего меню в маленьком корпусе, кроме выбранного. Выбранный должен отображаться в верхнем регистре.

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

Думаю, мы не можем использовать элементы стиля. Существуют ли другие альтернативы, кроме настраиваемого раскрывающегося списка?

Он работает нормально в ipad, поскольку поведение по умолчанию ipad совпадает с моим ожиданием. Но это не нормально в андроиде.

Вы можете увидеть выпадающее меню в этом fiddle.

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>