css - 如何更改焦点上的选择选项文本？

Question

我正在重新设置选择样式，当您第一次单击下拉菜单以显示选项时，它会在选项列表中选中当前选中的选项。您如何选择它以在 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;
}

Answer 1

我不确定这是否回答了问题，但这解决了我的问题。

因此，由于兼容性问题的数量，我决定完全放弃这个想法，并使用一些 jQuery 来处理它。我发现 Janko 的一篇文章解决了我的问题 ( http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx )。我使用了此博客上发布的第二个实现。

我稍微更改了代码，以便我可以重用它并将其用于多项选择，但将信用和 Prop 归功于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>');
    });
}

});