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/
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.
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
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.