Default text which won't be shown in drop-down list

Question

I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don\'t want it to show a

Answer 1

I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:

HTML:

Default message

    Option 1  
    Option 2
    Option 3

CSS:

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (with JQuery):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

I've made a jsfiddle for demo. Tested with Firefox and IE8.