HTML Select（下拉列表）在Chrome中的工作方式不同

Question

页面中有一个选择元素，它在Firefox中运行得很棒但在谷歌浏览器中非常恶心..

Firefox快照

谷歌浏览器快照

..  

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

Chrome中的尺寸差异是由于height属性造成的。您无法在Google Chrome中设置选项元素的高度。 How can I control the height of an Option element in Webkit?