Change The Height Of "option" Only With Css
Solution 1:
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.
Solution 2:
Change select > option to ul > li list and you can style as you want it yourself with Cross browser compatibility
Solution 3:
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.
Solution 4:
line-height can be useful
-webkit-appearance: menulist-button this one can be used both will work
Solution 5:
Try this:
option{
padding:10px0;
}
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.
Post a Comment for "Change The Height Of "option" Only With Css"