HTML Select (Drop Down) Working differently in Chrome

Question

There is an Select Element in a page, it working awesome in Firefox but very sick in Google Chrome..

Firefox snap

Google Chrome snap

..

HTML

        <select id="dropDown" class="dropDown">
            <option>Design & Creative</option>
            <option>Share Point Developer</option>
            <option>Software Development Engineer</option>
            <option>Silverlight Developer</option>
            <option>Dot Net Developer</option>
            <option>Quality Assurance</option>
            <option>Mobile Application</option>
            <option>IT Sales</option>
        </select>

CSS

.dropDown {
    -webkit-appearance: none;
    height: 60px;
    width: 450px;
    background: #c03400;
    font-size: 12pt;
    color: #fff; 
    border: none;
    outline: none;
    padding: 20px 15px;
    display: block;
    clear: both;

}

.dropDown option {
    -webkit-appearance: none;
    height: 10px;
    padding: 10px;
    color: #626262;
    background: #f5f3f3;
    outline: none;
    padding: 10px 15px;
    display: block;
    box-shadow: none;
    border: none;
}

.dropDown:hover, .dropDown:focus {
    background: #a62e01;
}

Answer 1

The size difference in Chrome is because of the height attribute. You can't set the height of an option element in Google Chrome. How can I control the height of an Option element in Webkit?