Làm cách nào để kiểm soát chiều cao của phần tử Tùy chọn trong Webkit?

Question

Điều này có vẻ thực sự đơn giản nhưng tôi thậm chí không thể tìm thấy một cái gì đó nói với tôi rằng nó không phải là có thể, hãy để một mình làm thế nào để làm điều đó.

Tôi có một trang sử dụng mở rộng/nhiều select giây và dường như tôi không thể kiểm soát chiều cao của các tùy chọn. Họ trông thật sự sảng khoái. Trong Firefox, giá trị CSS cho option trong height và line-height cả hai dường như có hiệu quả mong muốn, cũng như padding, nhưng không có trong Chrome 8 hoặc Safari 5. Tôi có thiếu gì đó không? Đây là một mẫu mã của tôi. Tôi đã đưa vào bất cứ điều gì có thể ảnh hưởng đến các tùy chọn trong trường hợp có một số giá trị ghi đè mà tôi đang thiếu.

body, input, select, checkbox { 
 
    font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif; 
 
    font-size: 15px; 
 
    font-weight:200; 
 
    line-height: 18px; 
 
} 
 

 
input, select { 
 
    color:#4c2a18; 
 
    border: 1px solid #cfc8b4; 
 
    background-color:#ffffff; 
 
    -moz-border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    margin:0; 
 
} 
 

 
option { 
 
    height: 35px; 
 
    padding:5px; 
 
    line-height: 35px; 
 
}

<select size="5"> 
 
    <option value="">This is option 1</option> 
 
    <option value="">Option 2</option> 
 
    <option value="">Just trying to show how the line height thing works.</option> 
 
</select>

Bạn có thể xem nó trong hành động here.

Answer 1

này là không thể trong Chrome, theo the electric toolbox:

Thiết đệm trên một optgroup hoặc tùy chọn không có tác dụng trong Chrome vì vậy bạn không thể kiểm soát lượng thụt đầu dòng. Bạn có thể đặt padding của toàn bộ lựa chọn trong Chrome (dưới dạng bạn có thể sử dụng IE8) nhưng trông có vẻ thực sự là lạ. Không giống IE8, bạn có thể nhấp vào ở bất kỳ nơi nào trong danh sách để mở thậm chí là nếu nó có đệm.