1561 votos

<select> marcador de posición

Estoy usando marcadores de posición para los cuadros de texto que se está trabajando bien. Pero me gustaría utilizar un marcador de posición para mis cajas de selección así. Por supuesto puedo usar este código:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Pero el 'Seleccione la opción' está en negro en lugar de gris. Así que mi solución podría estar basado en CSS. jQuery es bien también.

Esto sólo hace que la opción de color gris en el menú desplegable (para después de hacer clic en la flecha):

option:first {
    color: #999;
}

Edit: La pregunta es: ¿cómo hacen las personas para crear marcadores de posición en cajas de selección? Pero ya ha sido respondida, saludos.

Y mediante esto se traduce en el valor seleccionado siempre gris (incluso después de seleccionar una opción real):

select {
    color:#999;
}

3005voto

David Puntos 8827

¿No CSS - no javascript/jQuery respuesta?

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>

830voto

William Isted Puntos 1350

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'.

105voto

Albireo Puntos 4690

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/

26voto

allGood Puntos 106

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 :)

2voto

Kushal Jayswal Puntos 383

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.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X