Я не уверен, что это ответит на вопрос, но это решило мою проблему.
Поэтому я решил полностью отказаться от этой идеи из-за количествапроблемы совместимости и использовать некоторые jQuery для решения этой проблемы.Я нашел сообщение от Janko, которое решает мою проблему (http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx). Я использовал вторую реализацию, опубликованную в этом блоге.
Я немного изменил код, чтобы использовать его повторно и использовать его для множественного выборано кредиты и реквизиты Янко .
HTML
<div class="select-wrapper">
<select id="my-select-id">
<option value="all" selected="selected">All</option>
<option value="second">Second</option>
</select>
</div>
CSS
.select-wrapper { background:url(images/ui-sprite-sheet.png) no-repeat 0 0 transparent; height:32px; width:193px; }
.select-wrapper:hover { background-position:0 -32px !important; }
.select-wrapper SELECT { display:none; }
.dropdown { margin:0; padding:4px 8px 0; width:173px; }
.dropdown DT A { display:block; width:170px; padding:5px; color:#4d4c4c !important; text-decoration:none !important; font-size:14px !important; }
.dropdown DT A SPAN { cursor:pointer; display:block: padding:5px; }
.dropdown SPAN.value { display:none; }
.dropdown DD { position:relative; margin:0; padding:0; }
.dropdown DD UL { min-width:167px; width:167px; list-style:none outside none; position:absolute; padding:3px; background-color:#fff; border:1px solid #ccc;
display:none; margin:0; }
.dropdown DD UL LI { background:#fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff),color-stop(1, #ddd));
background: -moz-linear-gradient(center top, #fff 0%, #ddd 100%);
background: -o-linear-gradient(center top, #fff 0%, #ddd 100%);
background: -ms-linear-gradient(center top, #fff 0%, #ddd 100%);
background: linear-gradient(center top, #fff 0%, #ddd 100%); }
.dropdown DD UL LI:hover { background-color:#660000 !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #660000),color-stop(1, #2e0000)) !important;
background: -moz-linear-gradient(center top, #660000 0%, #2e0000 100%) !important;
background: -o-linear-gradient(center top, #660000 0%, #2e0000 100%) !important;
background: -ms-linear-gradient(center top, #660000 0%, #2e0000 100%) !important;
background: linear-gradient(center top, #660000 0%, #2e0000 100%) !important; }
.dropdown DD UL LI A { padding:5px; display:block; color:#4d4c4c !important; text-decoration:none !important; }
.dropdown DD UL LI:hover A { color:#fff !important; }
JQuery
$(document).ready(function(){
// Settings
var settings = { selectCount:0 };
var selects = [ '#my-select-id' ];
// Init SELECT's
$.grep(selects, function(n, i){
createDropDown(n);
});
// Events
$('.dropdown DT A').click(function() {
$('.dropdown DD UL').toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass('dropdown'))
$('.dropdown DD UL').hide();
});
$('.dropdown DD UL LI A').click(function() {
var text = $(this).html();
$('.dropdown DT A').html(text);
$('.dropdown DD UL').hide();
var source = $('#source');
source.val($(this).find('span.value').html())
});
// Functions
function createDropDown(id){
settings.selectCount++;
var target = 'target'+settings.selectCount;
var appendTo = $(id).parent('.select-wrapper');
var source = $(id);
var selected = source.find('OPTION[selected=selected]');
if (selected.val() == 'undefined' || selected.val() == null)
selected = source.find('OPTION[selected]');
var options = $('OPTION', source); // get all <option> elements
// create <dl> and <dt> with selected value inside it
appendTo.append('<dl id="'+target+'" class="dropdown"></dl>')
$('#'+target).append('<dt><a href="#">' + selected.text() +
'<span class="value">' + selected.val() +
'</span></a></dt>')
$('#'+target).append('<dd><ul></ul></dd>')
// iterate through all the <option> elements and create UL
options.each(function(){
$('#'+target+' DD UL').append('<li><a href="#">' +
$(this).text() + '<span class="value">' +
$(this).val() + '</span></a></li>');
});
}
});