Helpex - Trao đổi & giúp đỡ Đăng nhập
104

Lưu ý: Câu hỏi này không phải về việc tạo một menu thả xuống tùy chỉnh. Nó chỉ nói về khả năng tạo kiểu của <option>các phần tử trong phần tử được chọn trong CSS

Làm cách nào để tạo kiểu <option>cho một <select>phần tử có khả năng tương thích trên nhiều trình duyệt? Tôi biết nhiều cách JavaScript tùy chỉnh trình đơn thả xuống để chuyển đổi thành <li>, điều mà tôi không hỏi về nó.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Tôi đang hỏi điều gì có thể làm được chỉ với CSS, với khả năng tương thích cho IE9 +, Firefox và Chrome.

Làm cách nào để tạo kiểu cho <option> chỉ với CSS?

Tôi muốn tạo kiểu như thế này hoặc càng gần càng tốt.

Làm cách nào để tạo kiểu cho <option> chỉ với CSS?

Tôi đã thử tại đây http://jsfiddle.net/jitendravyas/juwz3/3/ , nhưng Chrome không hiển thị bất kỳ kiểu dáng nào ngoại trừ màu phông chữ, trong khi Firefox hiển thị một số kiểu khác. Làm cách nào để đường viền và phần đệm cũng hoạt động trong Chrome?

104 hữu ích 0 bình luận 334k xem chia sẻ
70

EDIT 2015 tháng 5

Tuyên bố từ chối trách nhiệm: Tôi đã lấy đoạn mã từ câu trả lời được liên kết bên dưới:

Cập nhật quan trọng!

Ngoài WebKit, kể từ Firefox 35, chúng tôi sẽ có thể sử dụng thuộc appearancetính:

Sử dụng -moz-appearancevới nonegiá trị trên hộp kết hợp bây giờ loại bỏ nút thả xuống

Vì vậy, bây giờ để ẩn kiểu mặc định, thật dễ dàng bằng cách thêm các quy tắc sau vào phần tử chọn của chúng tôi:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Để được hỗ trợ IE 11, bạn có thể sử dụng [ ::-ms-expand] [15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Câu trả lời cũ

Thật không may, những gì bạn yêu cầu không thể thực hiện được bằng cách sử dụng CSS thuần túy. Tuy nhiên, đây là một cái gì đó tương tự mà bạn có thể chọn làm công việc xung quanh. Kiểm tra mã trực tiếp bên dưới.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
Mở rộng đoạn mã

BIÊN TẬP

Đây là câu hỏi mà bạn đã hỏi một thời gian trước. Làm cách nào để tạo kiểu cho trình đơn thả xuống <select> chỉ với CSS mà không có JavaScript? Như nó nói ở đó, chỉ trong Chrome và ở một mức độ nào đó trong Firefox, bạn mới có thể đạt được những gì mình muốn. Nếu không, thật không may, không có giải pháp CSS thuần túy trình duyệt chéo nào để tạo kiểu cho một lựa chọn.

70 hữu ích 4 bình luận chia sẻ
4

Không có cách trình duyệt chéo nào cho các yếu tố tùy chọn tạo kiểu, chắc chắn không ở phạm vi ảnh chụp màn hình thứ hai của bạn. Bạn có thể làm cho chúng in đậm và đặt kích thước phông chữ, nhưng đó sẽ là về nó ...

4 hữu ích 0 bình luận chia sẻ
2

Tôi đã chơi xung quanh với các mục đã chọn trước đây và không ghi đè chức năng bằng JavaScript, tôi không nghĩ rằng điều đó có thể thực hiện được trong Chrome. Cho dù bạn sử dụng một plugin hay viết mã của riêng mình, thì chỉ CSS không phù hợp với Chrome / Safari và như bạn đã nói, Firefox xử lý nó tốt hơn.

2 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css html-select , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading