Clever Geek Handbook

Bootstrap adds padding for option selection

I was just wondering if I was adding an addition to the choices in the individual dropdowns in the Twitter Boostrap block. I added padding to all my other inputs, so the padding on my select options doesn't match. I would expect something like ...

option {
    padding: 0 24px;
}

... do the trick, but it does nothing for the boot selection option.

Any help would be appreciated.

Edit:

Here's the jsFiddle:

http://jsfiddle.net/sbmw3egx/

+3


source to share


3 answers


I managed to get the text in select

for left adjustment by setting the property text-indent

:

 select.form-control {
    text-indent: 16px;
 }

A little more about the property text-indent

here: http://www.w3schools.com/cssref/pr_text_text-indent.asp



Hope it helps!

Edit: Looks like Chrome / Safari uses text-indent

, Firefox uses text-indent

and padding-left

, and IE uses padding-left

for select

. I'm not sure how you would specify the CSS to make it consistent across all of these browsers.

+1


source


Assuming you are using Bootstrap form-control

, this first displayed parameter will take the form-control

CSS class style . Therefore, you need to override as well form-control

.

option {
    padding: 0 24px;
}

select.form-control {
    padding: 0 24px;
}


Demo: http://bootply.com/dCJM6I7z5V

0


source


This is one of those elements that are difficult to style. Usually I would like to just use plain css, but in cases like this (if you really have to style it) I would use a plugin.

http://www.bartos.me/heapbox/ is one example.

0


source






More articles:


All Articles