<select> marcador de posición

Tropecé al otro lado de esta cuestión, he aquí lo que funciona en FireFox Y Chrome (al menos)

<select>
    <option value='' disabled selected style='display:none;'>Please Choose</option>
    <option value='0'>Open when powered (most valves do this)</option>
    <option value='1'>Closed when powered, auto-opens when power is cut</option>
</select>

La opción Deshabilitada deja la Opción de ser seleccionadas con el ratón y el teclado, mientras que sólo el uso de 'display:none' permite al usuario todavía seleccione con las flechas del teclado. El 'display:none' estilo sólo hace que el cuadro de lista buscar 'bonito'.

Algo como esto, tal vez?

Código HTML:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

Ejemplo de trabajo: http://jsfiddle.net/Zmf6t/

Yo tenía el mismo problema y, mientras que la búsqueda llegó a través de esta pregunta, y después de encontrar una buena solución para mí, me gustaría compartir con ustedes en caso de que alguien se pueda beneficiar de ella. aquí está: Código HTML:

<select class=" place_holder dropdown">
        <option selected="selected" style=" display: none;">Sort by</option>
        <option>two</option>
        <option>something</option>
        <option>4</option>
        <option>5</option>
 </select>

CSS:

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

JS:

jQuery(".dropdown").change(function () {
        jQuery(this).removeClass("place_holder");
    });

una vez que el cliente hace seleccione primero no necesita color gris lo JS elimina la clase "palse_holder". Espero que esto ayude a algunos :)

El código es un poco diferente, pero puede ser utilizado para su propósito. Espero que te ayude.

Lógica: es el mismo que el mencionado en comentarios anteriores la única, además de que mi final es, mientras se hace clic en SELECCIONE la etiqueta de la primera OPCIÓN de la etiqueta con el nombre de la clase "vacío" será removida de la pila. Por lo que podemos considerar esto como una placehoder para SELECCIONAR.

CSS

.selectbox .empty, .empty{
    color: #ccc;
}
.selectbox { 
    background: url("images/search_arrow.png") no-repeat scroll 95% 12px; 
    width: 220px; 
    border: 2px solid #D1D1D1; 
    border-radius: 5px 5px 5px 5px; 
    float: right; 
    height: 29px; 
    margin-right: 15px; 
}
.selectbox div { 
    border-right: 2px solid #CCCCCC; 
    cursor: pointer; 
    height: 29px; 
    overflow: hidden; 
    padding: 1px 0 0 5px; 
    width: 180px; 
    z-index: -1; 
}
.selectbox select { 
    margin-top: 0; 
    height: 31px; 
    position: absolute; 
    width: 220px; 
    z-index: 2; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0);
    -khtml-opacity: 0; 
    -moz-opacity: 0; 
    opacity: 0; 
    cursor: pointer; 
}

JAVASCRIPT

jQuery(document).ready(function(){

// custom selectbox
jQuery("select").change(function () {
    var str = "";
    str = jQuery(this).find(":selected").text();
    jQuery(this).next(".out").text(str);
}).trigger('change');

jQuery("select").click(function () {
        var emp = jQuery(this).find(".empty").remove();
    });
});

HTML

<div class="selectbox">
    <select>
        <option class="empty">Sort by</option>
        <option>two</option>
        <option>something</option>
        <option>4</option>
        <option>5</option>
    </select>

<div class="out">Sort by</div>
</div>

Dado SELECTBOX clase sólo como un recipiente NO por su lógica de uso.