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


Đ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 khả thi, 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 selectvà tôi dường như 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 phải 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 đây.


12
2018-01-20 15:18


gốc


Tôi không chắc chắn 100%, nhưng tôi nghĩ điều này có khả năng là không thể trong Chrome. Các select yếu tố (và, tất nhiên, con cái của nó option các phần tử) nằm dưới sự kiểm soát của hệ điều hành bên dưới, thay vì trình duyệt. Rằng nó hoạt động ở tất cả các trình duyệt khác làm tôi ngạc nhiên. Bạn có thể sử dụng kiểu được kiểm soát và JavaScript, ul (hoặc là ol) để đạt được một yếu tố kiểu lựa chọn theo kiểu. - David Thomas
Tôi có thể tạo kiểu cho select trong Chrome và thêm padding và như vậy. - Ben Saufley
Tôi luôn luôn quên rằng 'Enter' gửi bình luận. Dù sao tôi đã xem xét ul nhưng nó dường như không cần thiết khi select làm một công việc hoàn toàn phù hợp, ngoại trừ nhồi nhét tất cả những thứ quá gần nhau. Tôi đang cố gắng tìm ra lý do tại sao nó không phải lúc nào cũng nhìn crammed - nếu có cái gì đó xa hơn các hệ thống cấp bậc đó gây ra điều này, hoặc những gì. - Ben Saufley


Các câu trả lời:


Điều này là không thể trong Chrome, theo hộp công cụ điện:

Đặt đệm trên một nhóm hoặc   tùy chọn không có hiệu lực trong Chrome vậy bạn   không thể kiểm soát lượng   thụt đầu dòng. Bạn có thể đặt phần đệm   của một tổng thể được chọn trong Chrome (như   bạn có thể với IE8) nhưng nó trông thực sự   kỳ dị. Không giống IE8, bạn có thể nhấp   bất cứ nơi nào trong các lựa chọn để mở nó ngay cả   nếu nó có đệm.


24
2018-01-20 16:37



Tuyệt quá! Cảm ơn. Thật là ngu xuẩn. - Ben Saufley
@Ben Saufley, nếu bạn muốn điều khiển biểu mẫu tùy chỉnh, bạn sẽ cần phải: 1. cuộn của riêng bạn, b. sử dụng một lib dựng sẵn, iii. chỉ sống với mặc định. - zzzzBov
@zzzzBov - Vì vậy, tôi đã nghe. Mặc dù tôi có thể làm khá nhiều thứ mà tôi cần mà không cần liên quan đến JS. Đây là một vấn đề thẩm mỹ nhỏ tôi đã hy vọng để giải quyết đơn giản. - Ben Saufley
@Ben Saufley, Chọn các yếu tố có xu hướng không được sử dụng thường xuyên vì chúng hơi xấu xí, bạn có thể thực hiện lựa chọn tương tự bằng cách sử dụng các nút radio và với một chút phong cách, bạn có thể biến một bộ nút / nhãn radio thành thứ gì đó hoạt động rất giống với một phần tử được chọn, trong khi thực sự là skinnable. - zzzzBov
Tôi gần như không upvote này vì nó ngu ngốc như thế nào là không hỗ trợ tạo kiểu dáng các yếu tố tùy chọn. Mặc dù đó là tin xấu, cảm ơn vì đã thông báo cho chúng tôi. Bây giờ tôi cần phải đi và thực hiện một kiểm soát hoàn toàn riêng biệt để làm việc với một cái gì đó tôi đang cố gắng để làm trong AngularJS chỉ vì vậy tôi có thể phong cách nó. Dù sao ... 1! - Ant