更改選擇選項焦點文本CSS

Question

我正在重新設置選擇，並且當您第一次單擊下拉菜單以顯示選項列表中選中的當前選項時。你如何選擇它在CSS中以不同的方式進行設計？我將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 .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

.select-wrapper select option[selected=selected] 

Answer 2

我不知道這個答案，但這個解決我的問題。

所以我決定完全抓住這個想法，因爲兼容性問題的數量很多，並使用一些jQuery來處理它。我發現一個由Janko發佈的帖子可以解決我的問題（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>'); 
    }); 
} 

}）;