CODEWITHSUNDEEP
htmlcss
王晨阳
王晨阳

Reputation: 41

change the height of "option" only with css

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>

Upvotes: 4

Views: 12390

Answers (7)

Marco Bonelli
Marco Bonelli

Reputation: 69276

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

Upvotes: 5

Antonio Ooi
Antonio Ooi

Reputation: 1828

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.

Upvotes: 0

Sonam
Sonam

Reputation: 2320

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

.a option { height: 50px; }

Upvotes: -2

Rahul Tripathi
Rahul Tripathi

Reputation: 172388

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.

Upvotes: 0

Michal Kucaj
Michal Kucaj

Reputation: 691

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

Upvotes: 2

Nima Parsi
Nima Parsi

Reputation: 2110

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.

Upvotes: 1

Sagar Naliyapara
Sagar Naliyapara

Reputation: 4161

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

Upvotes: 0

Related Questions