Cân nhắc this Bootstrap bug report. Về cơ bản, menu thả xuống <select> không được căn chỉnh với phần tử <select> trên Chrome và Safari (cả hai đều chỉ được thử nghiệm trên Mac). @mdo nghĩ rằng không có sửa chữa. Tôi chỉ muốn có ý kiến thứ hai.<select> thả xuống một vài pixel tắt
Trình đơn thả xuống <select> có được căn chỉnh với phần tử cơ sở <select> không?
Bạn sẽ không bao giờ trình duyệt phong cách xây dựng các công cụ giống nhau trên nhiều trình duyệt và trên nhiều hệ điều hành.
Tôi đã làm điều này một thời gian rất dài và tốt nhất tôi khuyên bạn nên tạo kiểu tốt nhất và có thể đặt trước các css quirky cho trình duyệt IE cũ.
Nếu bạn muốn siêu hậu môn về pixel chính xác, bạn không cần sử dụng thẻ html chọn và thay vào đó sử dụng thẻ ul. Sau đó, sử dụng css vào list-style: none;
<ul id="my_selectbox">
<li>Option 1</li>
<li>Option 2</li>
</ul>
Sau đó, tạo kiểu cho trình đơn trông chính xác như cách bạn muốn.
Vì vậy, hãy nghĩ đây là menu thay vì hộp chọn.
Sau đó, sử dụng javascript để làm cho trình đơn thả xuống như một thẻ được chọn.
(nhưng điều đó chắc chắn là rất nhiều công việc cho một vài điểm ảnh phải không?)
Hãy nhớ rằng, bạn sẽ không bao giờ viết một file CSS mà làm cho tất cả các trình duyệt trông giống hệt nhau. Chỉ cần không phải là cách chúng được thiết kế. Nếu bạn có người quản lý yêu cầu, họ cần phải tìm hiểu cách thức hoạt động của công cụ này.
lưu ý thêm: bạn sẽ phải sử dụng javascript để lưu trữ lựa chọn. Tôi có thể viết cho bạn một kịch bản nhanh để thực hiện điều này nếu bạn cần. Không chắc chắn bạn thành thạo với javascript như thế nào.
phong cách bổ sung này để nguyên tố này có thể giúp:
-webkit-appearance: none;
tùy chọn luôn luôn lấy toàn bộ chiều rộng của hộp chọn .. chính xác chiều rộng phụ thuộc vào yếu tố lớn nhất ... tôi không nghĩ rằng bạn có thể thay đổi vị trí của nó –
có thể trùng lặp của [Làm thế nào để phong cách thả xuống
đăng một mẫu mã về những gì bạn đang nói về – astroanu