Блог

Я изменяю стиль выбора, и при первом нажатии на выпадающий список, чтобы показать параметры, в списке параметров отображается тот, который выбран в данный момент. Как вы выбираете это, чтобы придать ему другой стиль в CSS? У меня есть CSS при наведении курсора мыши для параметров, которые меняют фон на красный, и я хотел бы использовать тот же стиль для чего бы это ни было.

Я пробовал option: focus и это не сработало.

Есть идеи?

Вот мой код:

 .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 .selected { margin:-24px 20px; display:block; color:#4d4c4c !important; font-size:14px; width:153px; }
.select-wrapper SELECT { position:relative; opacity:0; height:32px; width:183px; left:5px; top:-3px; }
.select-wrapper OPTION { color:#4d4c4c !important; padding:3px; 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%); }
.select-wrapper OPTION:hover { color:#fff !important; 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;
}
  

Я не уверен, отвечает ли это на вопрос, но это решило мою проблему.

Итак, я решил полностью отказаться от этой идеи из-за ряда проблем с совместимостью и использовать некоторые jQuery, чтобы позаботиться об этом. Я нашел сообщение Янко, которое решает мою проблему (http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx ). Я использовал вторую реализацию, опубликованную в этом блоге.

Я немного изменил код, чтобы я мог повторно использовать его и использовать для нескольких выборок, но кредиты и реквизит для Janko.

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>');
    });
}
  

});

 .select-wrapper select option[selected=selected]