HTML Select (выпадающая) Работа по-разному в Chrome

Question

Существует в Select Element на странице, он работает в 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 из-за атрибута высоты. Вы не можете установить высоту элемента option в Google Chrome. How can I control the height of an Option element in Webkit?