chọn tùy chọn phông chữ

Question

Tôi đã xây dựng this fiddle làm ví dụ về những gì tôi đang làm.

Điều tôi đang cố gắng thực hiện tốt trong Firefox. Với kích thước phông chữ là 14px khi bạn mở các tùy chọn đã chọn.

Tuy nhiên, hãy xem nó trong Google Chrome nó chọn kích thước phông chữ được thừa kế của 34px.

Tôi lý tưởng tìm các tùy chọn được chọn là kích thước phông chữ 14px.

Điều này có thể thực hiện được không?

Tôi sẵn sàng thực hiện mọi sửa lỗi có liên quan trong jQuery nếu cần.

Cảm ơn

Mã liệt kê dưới đây ......

My CSS là:

.styled-select { 
    overflow: hidden; 
    height: 74px; 
    float: left; 
    width: 365px; 
    margin-right: 10px; 
    background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c; 
} 

.styled-select select { 
    font-size: 34px; 
    border-radius: 0; 
    border: none; 
    background: transparent; 
    width: 380px; 
    overflow: hidden; 
    padding-top: 15px; 
    height: 70px; 
    text-indent: 10px; 
    color: #ffffff; 
    -webkit-appearance: none; 
} 

.styled-select option.service-small { 
    font-size: 14px; 
    padding: 5px; 
    background: #5c5c5c; 
} 

HTML Markup:

<div class="styled-select"> 
    <select class="service-area" name="service-area"> 
     <option selected="selected" class="service-small">Service area?</option> 
     <option class="service-small">Volunteering</option> 
     <option class="service-small">Partnership &amp; Support</option> 
     <option class="service-small">Business Services</option> 
    </select> 
</div> 

Answer 1

Một giải pháp có thể được để w rap các tùy chọn bên optgroup:

HTML:

<optgroup> 
    <option selected="selected" class="service-small">Service area?</option> 
    <option class="service-small">Volunteering</option> 
    <option class="service-small">Partnership &amp; Support</option> 
    <option class="service-small">Business Services</option> 
</optgroup> 

CSS:

optgroup { font-size:14px; } 

Answer 2

.service-small option { 
    font-size: 14px; 
    padding: 5px; 
    background: #5c5c5c; 
} 

Tôi nghĩ rằng nó bởi vì bạn đã sử dụng .styled-chọn trong đầu của lớp mã.

Answer 3

Giống như hầu hết các điều khiển biểu mẫu trong HTML, kết quả của việc áp dụng CSS cho các phần tử <select> và <option> thay đổi rất nhiều giữa các trình duyệt. Chrome, như bạn đã tìm thấy, sẽ không cho phép bạn áp dụng và kiểu phông chữ cho thành phần <option> trực tiếp --- nếu bạn kiểm tra Yếu tố trên đó, bạn sẽ thấy tuyên bố font-size: 14px được gạch chéo như thể nó bị ghi đè bởi cascade, nhưng nó thực sự là vì Chrome đang bỏ qua nó.

Tuy nhiên, Chrome sẽ phép bạn áp dụng kiểu font cho <optgroup> element, vì vậy để đạt được kết quả bạn muốn, bạn có thể bọc tất cả các <option> s trong một <optgroup> và sau đó áp dụng kiểu font của bạn vào một selector .styled-select optgroup. Nếu bạn muốn nhãn sans-optgroup, bạn có thể phải làm một số CSS thông minh với vị trí hoặc một cái gì đó để ẩn khu vực màu trắng ở phía trên, nơi nhãn sẽ được hiển thị, nhưng điều đó nên có thể.

Forked đến một JSFiddle mới để cho bạn thấy những gì tôi có nghĩa là:

http://jsfiddle.net/zRtbZ/

Answer 4

Bạn đang cố gắng để thay đổi font chữ của tùy chọn trong kiểu-chọn. Những gì bạn cần thay đổi là phông chữ của tùy chọn trong chọn trong được chọn kiểu.

.styled-select select > option.service-small{ 
    font-size: 34px; 
    border-radius: 0; 
    border: none; 
    background: transparent; 
    width: 380px; 
    overflow: hidden; 
    padding-top: 15px; 
    height: 70px; 
    text-indent: 10px; 
    color: #ffffff; 
    -webkit-appearance: none; 
} 

Answer 5

Tôi biết điều này là một một Q cũ & A (~ 2013), nhưng tôi muốn chia sẻ một giải pháp tuyệt vời Tôi chỉ thấy rằng thực sự hoạt động trên tất cả (hầu hết) các trình duyệt:

Pure CSS select dropdown style – override the default select dropdown styles with CSS

được đăng vào 22 tháng 9 năm 2015 bởi Jeff Hays @ robido.com

tôi thấy stackoverflow Q này & A đầu tiên, vì vậy muốn chia sẻ những gì tôi tìm thấy với những người khác có thể đi qua này sau.

Answer 6

này làm việc cho tôi (jQuery):

$('select').css('font-size', '20px');