Html – how to increase line height between two option in multi select dropdown

csshtmljquery

How to increase the line height between two option in multi select

HTML

<div>
    <select class="dk_multioptions_inner" tabindex="5" id="multiple" style="width: auto; visibility: visible; position: relative; font-weight:bold;" multiple="multiple">
        <option style="width: 150px;" value="Diploma degree">Diploma degree</option>
        <option value="Technical degree">Technical degree</option>
        <option  value="bachelor degree">Bachelor degree</option>
        <option value="Masters degree">Masters degree</option>
        <option value="Masters degree in technology">Masters degree in technology</option>
    </select>
</div>

CSS

.dk_multioptions_inner
{
    margin-left:-1px;
    margin-top:2px;
    color: #000000;
    max-height: 250px;
    border:1px solid #c997ba;
    background-color: #eeeeed;
    background-image: -moz-linear-gradient(top, #f9f9f8, #dadad9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f8), to(#dadad9));
    background-image: -webkit-linear-gradient(top, #f9f9f8, #dadad9);
    background-image: -o-linear-gradient(top, #f9f9f8, #dadad9);
    background-image: linear-gradient(to bottom, #f9f9f8, #dadad9);
    border-radius: 4px;
    -webkit-border-top-right-radius:0px;border-top-right-radius:0px;-moz-border-radius-topright:0px;
    -webkit-border-top-left-radius:0px;border-top-left-radius:0px;-moz-border-radius-topleft:0px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

Fiddle link

How to increase the line height?

Best Solution

Here's the code that works exactly:

#multiple option{
   padding: 8px;
}

or

#multiple option{
   height: 30px;
}

That's it.

Related Question