Có cách nào để chọn một hộp chọn mở trong css không?

Question

Tôi đặt hình nền (mũi tên xuống) thành một hộp chọn sau khi đặt thuộc tính webkit-appearance thành none. Khi danh sách tùy chọn được mở, tôi muốn hiển thị một hình nền khác (mũi tên lên). Có một lớp giả hoặc một cái gì đó cho nó? Tôi không thể tìm thấy bất cứ điều gì trong quá trình tìm kiếm của tôi ...

Answer 1

Không thể phát hiện xem phần tử HTML select có được mở bằng CSS hay thậm chí là javascript hay không.

Nếu bạn muốn tùy chỉnh biểu tượng mũi tên của menu thả xuống tùy chỉnh, tùy chọn tốt nhất của bạn là sử dụng thành phần thả xuống tùy chỉnh ánh xạ tới phần tử select ẩn.

Answer 2

bạn có thể sử dụng lớp học giả :focus.

Nhưng điều này sẽ cho biết trạng thái "mở", cũng khi chọn <select> qua tab hoặc một mục vừa được chọn. Để phá vỡ điều này, bạn có thể sử dụng một cái gì đó như select:hover:focus nhưng điều này là khá xấu xí và không phải là một giải pháp vững chắc.

select:focus 
 
{ 
 
    background-color: blue; 
 
    color: white; 
 
}

<select> 
 
    <option>Click me</option> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>