Pardeep Jain February 2016

Bootstrap class not applied in HTML select tag

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 ?

Answers


SaucedApples February 2016

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>


Pardeep Jain February 2016

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 :)

Post Status

Asked in February 2016
Viewed 1,481 times
Voted 4
Answered 2 times

Search




Leave an answer