1

I want to display all other options of a dropdown in small case, except The selected one. Selected one should be displayed in uppercase.

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

I think, we cannot style option elements. Is there any other alternatives other than a custom drop-down?

It's working fine in ipad since ipad's default behaviour is same as my expectation. But it's not fine in android.

You can see the dropdown in this fiddle.

T J
  • 42,762
  • 13
  • 83
  • 138
Gibbs
  • 21,904
  • 13
  • 74
  • 138
  • Thanks Barmar. Shall i delete this question ? – Gibbs Oct 12 '14 at 08:16
  • No, it's not necessary. Marking it as a duplicate is enough. – Barmar Oct 12 '14 at 08:17
  • @user3801433 *"I want to display all other options in small case except selected one. Selected one should be displayed in lowercase"* Did you mean selected value should be in uppercase as in the title..? – T J Oct 12 '14 at 08:28
  • Yeah. Selected value in the option and displaying value must be in caps – Gibbs Oct 12 '14 at 08:32
  • I suggest you ask the about problems with the answer in that question. – Barmar Oct 12 '14 at 08:34
  • @Barmar that question is specific to CSS, asking for a pseudo selector similar to `:checked`, this is a totally different question - the OP specially mentioned android browsers, The answer for the dup is [not working](http://jsfiddle.net/dorL5k2e/7/) in latest versions of chrome as well as opera. This question is tagged with `jquery` and `javascript` as well. So I suggest you re-evaluate your decision. – T J Oct 12 '14 at 08:44
  • I've reopened the question, but I still think they're essentially the same question. – Barmar Oct 12 '14 at 08:47
  • It seems that the only reason this question asks for Javascript is because of his presumption that you can't style option elements. – Barmar Oct 12 '14 at 08:48

1 Answers1

1

You can use jQuery text() function :

$("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>
T J
  • 42,762
  • 13
  • 83
  • 138
  • @user3801433 that is because your description was not clear, which is why i asked for clarification.. It's fixed now -I updated the answer as well as the description... – T J Oct 12 '14 at 08:51
  • @user3801433 it's in uppercase for me in chrome 37, IE 11, FF 32, Opera 24 & Safari 5.17 (*windows*) which browser are you using..? – T J Oct 12 '14 at 09:33
  • EDIT: Selected option is diplaying in uppercase in the closed view. When i expand it, all are smallcase. – Gibbs Oct 12 '14 at 09:50
  • @user3801433 [this](http://jsfiddle.net/dorL5k2e/12/) works in chrome, and opera, somewhat in FF, but isn't reliable cross browser... – T J Oct 12 '14 at 10:22
  • Working fine in FF, Gets crashed in Chrome 38 – Gibbs Oct 13 '14 at 06:22