change the height of "option" only with css

Question

For example,in the code,"option"is too low,I want to make it higher only with css(no javascript).

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

Possible duplicate http://stackoverflow.com/questions/13231419/change-the-option-height-of-dropdown-css-javascript — dowomenfart, Mar 25 '15 at 13:22
Do you mean the position that the option element is in—as in the placement, the order? — Sebastian Simon, Mar 25 '15 at 13:23
do you mean the height of the dropdown menu? have you tried a css solution or googled it at least? — Doml The-Bread, Mar 25 '15 at 13:25
possible duplicate of [how to style the option of a html "select"?](http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) — Nima, Mar 25 '15 at 13:32
Maybe my English is poor,i want to add the height of the "option ",thanks eveyone — 王晨阳, Mar 25 '15 at 15:07

score 3 · Answer 1 · answered Mar 25 '15 at 13:24

3

Since that <option> (and <select>) elements are rendered by the browser as a dropdown list, unfortunately you cannot style them, because their style is only controlled by the browser itself.

answered Mar 25 '15 at 13:24

Marco Bonelli

63,369
21
118
128

score 2 · Answer 2 · answered Mar 25 '15 at 13:26

2

Change select > option to ul > li list and you can style as you want it yourself with Cross browser compatibility

answered Mar 25 '15 at 13:26

Michal Kucaj

681
5
15

score 1 · Answer 3 · edited May 23 '17 at 11:45

You can use ul as alternative to style as you want, check this answer.

You can only make options bold or change the font-size, but it's not possible to change the space of the option.

option{font-size:20px;font-weight:bold;}

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

Options are rendered by the OS, not HTML, so the styling is limited.

Rahul Tripathi · Answer 4 · 2015-03-25T13:48:05.060

0

Try this:

option{
     padding:10px 0;
   }

JSFIDDLE DEMO

Also you can use the <optgroup> element to make it run in Chrome.

EDIT:-

Just saw that it is not reliable and cant be addressed perfectly for cross browser solutions.

MDN says:

Some elements simply can't be styled using CSS. These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including , , and elements. The file picker widget is also known not to be stylable at all. The new and elements also fall in this category.

Alternative other than Javascript:

If possible then use Bootstrap's Dropdown.

edited Mar 25 '15 at 13:48

answered Mar 25 '15 at 13:23

Rahul Tripathi

168,305
31
280
331

@Paulie_D:- I am using IE and it works perfectly fine in that – Rahul Tripathi Mar 25 '15 at 13:26
1

I didn't downvote but obviously this solution is not cross-browser...you might want to update your answer to that effect. – Paulie_D Mar 25 '15 at 13:27
1

It's not cross browser. – rm4 Mar 25 '15 at 13:28
@Paulie_D:- Yes I also checked in Chrome and other browsers, its not working. Updated my answer(*was checking that only*). Thanks for updating me as well – Rahul Tripathi Mar 25 '15 at 13:49
1

@rm4:- Yes got that. Thanks. Updated my answer – Rahul Tripathi Mar 25 '15 at 13:49

score 0 · Answer 5 · answered Mar 25 '15 at 13:24

0

line-height can be useful -webkit-appearance: menulist-button this one can be used both will work

answered Mar 25 '15 at 13:24

Sagar Naliyapara

3,971
5
41
61

score 0 · Answer 6 · answered Jul 22 '20 at 09:17

0

If you're concerning about the mobile friendliness or the Google's mobile first SEO guidelines where the tappable items must not close to each other, then don't worry, modern mobile web browser will auto-adjust the item height for you.

answered Jul 22 '20 at 09:17

Antonio Ooi

1,601
1
18
32

score -1 · Answer 7 · edited Mar 25 '15 at 15:59

-1

Try This: change the height px to what you wish.

.a option { height: 50px; }

edited Mar 25 '15 at 15:59

Soner Gönül

97,193
102
206
364

answered Mar 25 '15 at 13:30

Sonam

2,322
2
13
5

what is the object of class "a"? – 王晨阳 Mar 25 '15 at 15:23
Height doesn't work for option of select tag – Fasco Jan 06 '23 at 10:04

change the height of "option" only with css

7 Answers7

Linked