Làm thế nào để thay đổi phong cách của một hộp Chọn 'nhãn nhóm chọn lọc

Question

Tôi có một hộp chọn đơn giản với một optiongroup trong ứng dụng của tôi.

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
</optgroup> 
    ---- 
    ---- 
    ---- 
</select> 

Khi được hiển thị trong trình duyệt, nhãn nhóm tùy chọn được hiển thị bằng chữ in đậm và in nghiêng; Tôi muốn nó được hiển thị mà không có bất kỳ phong cách nào.

Answer 1

Rất tiếc, các hộp chọn là một trong số ít những thứ bạn có thể thêm rất ít phong cách cho CSS. Bạn thường bị giới hạn cách trình duyệt hiển thị nó.

Ví dụ, nó trông như thế này trong chrome:

Và điều này trong Firefox:

Answer 2

Bạn có thể tạo kiểu một hộp chọn chỉ sử dụng css, nó đòi hỏi một loại công việc xung quanh:

Đầu tiên, bạn bao quanh nó với một div và cho rằng một lớp học:

<div class="selectStyle"> 
    <select> 
     <option>First Option</option> 
     <option>Second Option</option> 
    </select> 
</div> 

Sau đó, bạn chắc chắn rằng các yếu tố chọn được kiểu một cách nào đó sử dụng css:

.selectStyle select { 
    background: transparent; 
    width: 250px; 
    padding: 4px; 
    font-size: 1em; 
    border: 1px solid #ddd; 
    height: 25px; 
} 

Và bạn tạo kiểu cho div:

.selectStyle { 
    width: 235px; 
    height: 25px; 
    overflow: hidden; 
    background: url(yourArrow.png) no-repeat right #ccc; 
} 

Answer 3

Trên hầu hết các trình duyệt (thử nghiệm trên IE mới nhất và FF), bạn có thể dễ dàng thay đổi nhãn của nhóm chọn chỉ bằng CSS:

select optgroup{ 
    background:#000; 
    color:#fff; 
    font-style:normal; 
    font-weight:normal; 
    } 

Rõ ràng, bạn có thể đặt bất kỳ tên lớp nào thay vì thẻ html chọn. Bằng cách này, như các câu trả lời khác cho biết, vẫn còn vài tùy chọn CSS để sử dụng với các hộp chọn và nhiều quản trị viên web ghi đè chúng bằng cách sử dụng phương thức do user949847 đưa ra. Nhưng mã này ở trên phải đủ để phù hợp với nhu cầu của bạn.

Answer 4

Firefox phong cách nhãn sử dụng quy tắc này:

optgroup:before { 
    content: attr(label); 
    display: block; 
} 

Bạn có thể ghi đè lên nó.

Answer 5

Để có cách tiếp cận khác để phá vỡ các vấn đề với nhóm chọn kiểu dáng, tôi khuyên bạn nên sử dụng các tùy chọn đã tắt.

<option disabled>[group label]</option> 

bạn có thể chụp ảnh tạo kiểu cho ví dụ.

<style> [disabled] { color:#000; background-color:#CCC } </style>