Tôi muốn sử dụng hình ảnh cho nền của lựa chọn/thả xuống. CSS sau hoạt động tốt trong Firefox và IE, nhưng không hoạt động trong Chrome:Hình nền cho Chọn (menu thả xuống) không hoạt động trong Chrome
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
Nói chung, việc kiểm soát biểu mẫu chuẩn bị coi là xấu vì đầu ra trông rất khác trên mỗi trình duyệt. Xem: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ đối với một số ví dụ được hiển thị.
Điều đó đang được nói, tôi đã có một số may mắn làm màu nền một giá trị RGBA:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome vẫn ám một gradient trên đỉnh của hình nền trong màu sắc mà bạn vượt qua để rgba (r, g, b, 0,1) nhưng chọn màu phù hợp với hình ảnh của bạn và làm cho alpha 0,1 giảm hiệu ứng của điều này.
Điều Arne đã nói - bạn không thể tạo kiểu cho các hộp được chọn một cách đáng tin cậy và khiến chúng trông giống như bất cứ thứ gì nhất quán trên các trình duyệt.
Đồng phục: https://github.com/pixelmatrix/uniform là giải pháp javascript cung cấp cho bạn khả năng kiểm soát đồ họa tốt trên các phần tử biểu mẫu của bạn - nó vẫn là Javascript, nhưng nó đẹp như javascript để giải quyết vấn đề này.
cảm ơn vì đá quý này. làm cho cuộc sống của tôi dễ dàng hơn rất nhiều – heymrcarter
cảm ơn. rất tốt ... – AEMLoviji
select
{
-webkit-appearance: none;
}
Nếu bạn cần bạn cũng có thể thêm một hình ảnh có chứa các mũi tên như một phần của nền.
bạn có thể sử dụng dưới phong cách css cho tất cả các trình duyệt Firefox trừ 30
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
trang demo - http://kvijayanand.in/jquery-plugin/test.html
Cập nhật
đây là giải pháp cho Firefox 30. mẹo nhỏ cho tùy chỉnh chọn các phần tử trong firefox: -moz-any() css pseudo class.
Thêm chiều cao dòng vào lớp được áp dụng cho yếu tố lựa chọn giải quyết được sự cố. Cảm ơn. –