How to increase the spacing between options in Dropdown list?
Question
Application Type
Reactive

I tried changing the padding but it doesn't work

option {
    font-weight:normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 16px;
}
Champion

Hello Shu

There are only a few style attributes that can be applied to an <option> element.

To achieve this you will need to create the Custom Dropdown - https://www.w3schools.com/css/css_dropdowns.asp 

Hi Shu,

Without custom, dropdown to create space between.

Basically, the only way I could think of adding "space" between two elements within your DropDownList would be to actually place an empty element in the list.

Thanks & Regards,

Mulayam Yadav

Hi Shu,

This type of element is not a part of HTML/Browser. it is a replaced type element that is OS dependent so it can not styled via CSS.

You need to create custom select box :-

Custom Select box

I came across this post while looking for a solution, I didn't find it but it took me 2 mins with the inspect from chrome to find it.

(this is on reactive btw)

.choices__list--dropdown .choices__item {
    margin-top: 15px;    
}


You need to override OS default styling for this btw, so I would probably do this on a case by case (css on the web block).
There is probably a way to do it with the extended class from the dropdown list block, but, it probably gives more effort to find out how to do it and for my use case this works perfectly.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.