선택 옵션 초점 텍스트 변경하기 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>'); 
    }); 
} 

});