Have a equal row height in a dropdown list

Question

I've got a dropdown list. Each row is in a different font type. Now the problem is that each row height is different due to the different font type.

My question is that how do I extend the height so each row has a equal height in my drop down list?

enter image description here

EDIT 1:

  <select class="fonts">
     <option style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
     <option style="font-family: Arial">Arial</option>
     <option style="font-family: 'Times New Roman'">Times New Roman</option>
  </select>

EDIT 2:

Here is a quick Fiddle - I'm testing in IE

you can use below css to set min height of option. .parentclass option { min-height: 20px; } — Mukesh Panchal, May 19 '15 at 08:56
@MukeshPanchal thanks. `min-height: 100px;` didn't work. See my edit. I've created a quick Fiddle. — Becky, May 19 '15 at 08:58
Styling options is not possible, you need to have a different HTML markup or use a JS plugin. Take a look at this: http://stackoverflow.com/a/8431078/4711865 — odedta, May 19 '15 at 10:27
Yes @odedta is right. select option not take any style because it render depend on browser and OS which we use different browser and OS have different style. — Mukesh Panchal, May 19 '15 at 10:34

score 0 · Answer 1 · answered May 19 '15 at 08:12

0

use something like:

option {
   padding: 30px 10px;
}

answered May 19 '15 at 08:12

monxas

2,475
2
20
36

thanks. I did what you've suggested but no luck `.fonts option{ padding: 30px 10px; }` – Becky May 19 '15 at 08:49
I see, it works for firefox, but it doesn't in chrome or other webkit browser... https://jsfiddle.net/mq46c1ao/ – monxas May 19 '15 at 08:54

Have a equal row height in a dropdown list

1 Answers1