How to change the select option text on focus?

Question

I'm restyling select and when you first click the drop down to show the options it has the one currently selected selected in the list of options. How do you select that to style it differently in CSS? I have hover CSS for the options that would change the background to red, and I would like to use that same style for whatever this is.

I have tried option:focus and that didn't work.

Any ideas?

Here is my code:

.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

I'm not sure if this answers the question but this resolved my problem.

So I decided to scratch this idea altogether because of the number of compatibility issues and use some jQuery to take care of it. I found a post by Janko that resolves my problem (http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx). I used the second implementation posted on this blog.

I changed the code a bit so I could reuse it and use it for multiple selects but credits and props to Janko.

The HTML

<div class="select-wrapper">
  <select id="my-select-id">
    <option value="all" selected="selected">All</option>
    <option value="second">Second</option>
  </select>
</div>

The 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; }

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

});

Answer 2

.select-wrapper select option[selected=selected]