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

Question

页面中有一个选择元素,它在Firefox中运行很棒,但在Google Chrome中非常恶心.

Firefox快照

Google Chrome快照

..

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中设置选项元素的高度. 如何在Webkit中控制Option元素的高度？