javascript - How to display selected value of a dropdown alone in uppercase? -

javascript - How to display selected value of a dropdown alone in uppercase? -

i want display other options of dropdown in little case, except selected one. selected 1 should displayed in uppercase.

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

i think, cannot style alternative elements. there other alternatives other custom drop-down?

it's working fine in ipad since ipad's default behaviour same expectation. it's not fine in android.

you can see dropdown in fiddle.

you can utilize jquery text() function :

class="snippet-code-js lang-js prettyprint-override">$("select").change(function () { $(this).find("option").text(function (i, text) { homecoming $(this).is(":selected") ? text.touppercase() : text.tolowercase() }); }).trigger("change"); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>one</option> <option>two</option> </select>

javascript jquery css css3