Increase gap between select menu options

Question

I am creating a Drop down list in HTML using select tag. I am unable to increase the gap between the options inside the select list. Below is my code. How i can increase the gap between the options?

<style type="text/css">
    #height {
        width: 200px;
    }
        #height option {
            width: 500px;
            height:200px !important;
        }
</style>

<select id="height">
    <option value="bugatti">Bugatti</option>
    <option value="lamborghini">Lamborghini</option>
    <option value="ferrari">Ferrari</option>
    <option value="levis">Levis</option>
    <option value="reebok">Reebok</option>
    <option value="nike">Nike</option>
</select>

You might struggle with this one using standard SELECT/OPTION tag, as different browsers render them in their own way. (desktop and mobile) - have you considered a drop down menu using CSS/JavaScript/jQuery? — ash, Jul 02 '15 at 07:14
Duplicate: http://stackoverflow.com/questions/5887133/cssselect-dropdown-option , http://stackoverflow.com/questions/10825332/how-to-add-padding-between-options-in-select-input , http://stackoverflow.com/questions/17186777/adding-padding-to-select-options It can't be done with standard methods. You will need to use something like Bootstrap to achieve what you want. — ZeroBased_IX, Jul 02 '15 at 07:19
Form elements are uneasy to style (select, checkbox, radio, ...). You can use another element and combine it with JS, but it make it less accessable. The only one right advice, do nothing with it. — pavel, Jul 02 '15 at 07:19
possible duplicate of [Select option padding not working in chrome](http://stackoverflow.com/questions/22681141/select-option-padding-not-working-in-chrome) — DavidDomain, Jul 02 '15 at 07:19
possible duplicate of [How can I add padding to html dropdownlist?](http://stackoverflow.com/questions/1083652/how-can-i-add-padding-to-html-dropdownlist) — ZeroBased_IX, Jul 02 '15 at 07:19
@doublesidedstickytape, no i have not considered using JS and Jquery. I just want to put gap between options, if it is possible with JS and Jquery that is also fine. Can you help me? — Code, Jul 02 '15 at 07:20

score 4 · Answer 1 · answered Jul 02 '15 at 07:19

The rendering of option tags is determined by the browser and they have their own peculiar way and so the restrictions like padding and even margin of option tag works in the mozilla firefox while it doesn't works with chrome.

Summary : If its very necessary to change the appearance, you can use custom JS plugins.

score 0 · Answer 2 · edited Jul 02 '15 at 07:48

0

That is not possible. If you really need this you should create a custom Option Menu.

No padding, margin, height or line-height are working for options. You can go with an empty option between the elements but its not a nice solution.

edited Jul 02 '15 at 07:48

Alias Varghese

2,104
3
24
52

answered Jul 02 '15 at 07:20

Sebastian Wächter

51
5

score 0 · Answer 3 · edited Sep 01 '16 at 19:32

0

One workaround I found: Increase the font size of just one element (I chose the first one, which I always keep as a blank). I did it programmatically with Javascript:

document.getElementById("myddl").options[0].style.fontSize = "xx-large";

This forces all the options to be displayed with the same (enlarged) space, even though the fontsize of the other options is unchanged.

edited Sep 01 '16 at 19:32

miken32

42,008
16
111
154

answered Sep 01 '16 at 19:20

TTobin

1
1

score -1 · Answer 4 · answered Jul 02 '15 at 07:30

Woooo i tried this with different browser and one thing i found that by giving padding to the option of select tag this will only work in FireFox except other Browsers like(crome,Ie,safari)...!!!!!!

Strange ..!!!!

so you can try that dropdown with

or jquery Pluggins for dropdown

Increase gap between select menu options

4 Answers4