Bootstrap class not applied in HTML select tag

Question

Getting puzzled why Bootstrap class text-uppercase is not working with select options in HTML, whereas apart from select option all classes are working fine.

Here is a working demo for text-uppercase :

http://plnkr.co/edit/DR8jPACODGzvW8W0ZX2u?p=preview

<select class="form-control">
    <option>One</option>
    <option><span  class="text-uppercase">two</span></option> //class="text-uppercase" not working
    <option class="text-uppercase"> three</option> //same here
</select>

Am i doing something wrong ?

you can't do that.... you need to add the class on the option. — Sam Teng Wong, Feb 08 '16 at 09:49
Could you not add **.text-uppercase{text-transform:uppercase}** to your css? — ggdx, Feb 08 '16 at 09:49
because by default `button, select { text-transform: none;}` is set somewhere overwrite it by `uppercase` you will get your output — Dhara, Feb 08 '16 at 09:54
Mny browsers doesnt allow selct/option styling. Some workarounds with examples are in this [question](http://stackoverflow.com/a/8431078/1368752) — dafyk, Feb 08 '16 at 09:55
but why ? we have predefined class already then why new one ? @ShiguriAnemone' — Pardeep Jain, Feb 08 '16 at 10:05

Sauced Apples · Answer 1 · 2016-02-08T10:08:31.520

3

The class="text-uppercase" needs to be used with the option tag.

<select class="form-control">
    <option>One</option>
    <option class="text-uppercase"><span>two</span></option>
    <option class="text-uppercase"> three</option> //same here
</select>

You had been using class="text-uppercase" with <span> not <option>

edited Feb 08 '16 at 10:08

answered Feb 08 '16 at 09:51

Sauced Apples

1,163
2
14
37

me too used `text-uppercase` with option tag as in plnkr ! but why to add external css class in the css file ? – Pardeep Jain Feb 08 '16 at 10:05
Because the existing class `text-uppercase` will be defined by he option tag and only usable with the option tag. EG: `option .text-uppercase{ text-transform: uppercase; }` – Sauced Apples Feb 08 '16 at 10:06
i have used with `option` tag too check my last `option` tag so ? – Pardeep Jain Feb 08 '16 at 10:21
see my updated plnkr your code is also not working ! – Pardeep Jain Feb 08 '16 at 10:30
Side note, stop using exclamation marks. Makes me want to tell you to solve it yourself. – Sauced Apples Feb 08 '16 at 10:30
@PardeepJain I added the `text-uppercase` to only the second option. Now the second option is uppercase as desired. It's working as suggested by the upvotes on my answer. – Sauced Apples Feb 08 '16 at 10:33
this one also not working as you can see this in the plnkr. well thanx for the answer :) – Pardeep Jain Feb 08 '16 at 10:36
hey @saucedApples sorry for everything its working now in windows. but before now i am working on linux and on ubuntu its not working dont know why. sorry for inconvenience. and thanx for answer :) – Pardeep Jain Feb 08 '16 at 17:38
@pardeep jain no worries. Please upvote and mark as answered if it helped. – Sauced Apples Feb 08 '16 at 17:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102922/discussion-between-pardeep-jain-and-saucedapples). – Pardeep Jain Feb 08 '16 at 17:46

score 0 · Accepted Answer · answered Feb 08 '16 at 17:44

yes exactly as said by @debin in comment. class text-uppercase is get overwritten by the default behaviour of bootstrap style i.e

button, select { text-transform: none;}

you can check it here...

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css

so to apply the class like text-uppercase text-capetalize etc we have to add extra class in the css file or something like that i.e inline enternal or external style. so exact answer is like this:

<select class="form-control customClass">
    <option>One</option>
    <option>two</option> 
    <option> three</option> 
</select>

use .customClass in your css and use style text-transform: uppercase;

second method as suggested by @SaucedApples

<select class="form-control">
    <option>One</option>
    <option class="text-uppercase"><span>two</span></option>
    <option class="text-uppercase"> three</option> //same here
</select>

this will add indvidualy class to option tag.

posting it as answer may it help someone Else :)

Bootstrap class not applied in HTML select tag

2 Answers2