[ACCEPTED]-How can I add padding to html dropdownlist?-css
OK, I hate to sound all 1990s, but would 3 simply pre- and app-ending a space to the 2 option text be acceptable for your desired 1 goals?
It is difficult to style a drop down box 3 cross browser. To get any sort of control, you'll 2 need to code a replacement one in JavaScript. Be 1 warned, however:
- Remember that the user may have difficulty using your drop down - take usabilty into account
- Replace a select element with JS - this is an accessibility issue (and also allows users without JS support to use the form input)
The following works, in FF3+ and Midori 15 (and presumably other Webkit browsers):
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
The 14 width is to allow enough room in the displayed 13 select box when not active, the margin does what 12 it always does, text-indent is used to feign padding 11 between the left boundary of the select 10 box and the inner-text. line-height is just to allow 9 vertical spacing.
I can't comment on its 8 use in IE, I'm afraid, so if anyone could 7 feed back -or adapt- to suit that'd be good.
It's 6 worth noting that the drop-down part of 5 the select (select *) isn't affected outside of 4 FF3 for me, for whatever reason, so if that 3 was the question you wanted answering, I 2 apologise for offering nothing new.
Demo 1 at: http://davidrhysthomas.co.uk/so/select-styling.html
Create a class for the SELECT
.listBox{
width: 200px;
...etc
}
Now define the Css for the options of the 1 SELECT
.listBox option{
padding:4px;
...etc
}
Tested on IE 10
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.