¿Cómo configuro una descripción predeterminada no seleccionable en un menú de selección (desplegable) en HTML?

Question

que tienen un menú desplegable donde el usuario selecciona un idioma:

<select> 
    <option>English</option> 
    <option>Spanish</option> 
</select> 

1. Quiero la opción predeterminada que se muestra inicialmente a decir "Seleccione un lenguaje" en lugar de (mi primera opción "Inglés", mostrado por por defecto).
2. No deseo que el usuario pueda seleccionar "Seleccionar un idioma".

Answer 1

Si ninguna de las opciones en la selección tiene un atributo selected, la primera opción será la seleccionada.

el fin de seleccionar una opción por defecto que no es la primera, añadir un atributo selected a esa opción:

<option selected="selected">Select a language</option> 

se puede leer el HTML 4.01 spec con respecto a los valores predeterminados en el elemento de selección.

Sugiero leer un buen libro HTML si necesita aprender conceptos básicos de HTML como este - Recomiendo Head First HTML.

Answer 2

Simplemente haga la opción # 1 Selecciona Idioma:

Live Demo

Answer 3

Sobre la base de la respuesta de Oded, también se puede establecer la opción por defecto, pero no que sea una opción seleccionable si es sólo el texto de relleno. Por ejemplo, usted podría hacer:

<option selected="selected" disabled="disabled">Select a language</option> 

Esto demostraría "Seleccionar una lengua" antes de que el usuario hace clic en el cuadro de selección pero el usuario no sería capaz de seleccionar porque el atributo de personas con discapacidad.

Answer 4

.selectmenu{ 
 
    
 
\t -webkit-appearance: none; /*Removes default chrome and safari style*/ 
 
\t -moz-appearance: none; /* Removes Default Firefox style*/ 
 
\t background: #0088cc ; 
 
\t width: 200px; /*Width of select dropdown to give space for arrow image*/ 
 
\t text-indent: 0.01px; /* Removes default arrow from firefox*/ 
 
\t text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
 
\t color: #FFF; 
 
\t border-radius: 2px; 
 
\t padding: 5px; 
 
    border:0 !important; 
 
\t box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
 
} 
 
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }

Try this html 
 

 
<select class="selectmenu"> 
 
<option selected disabled class="hideoption">Select language</option> 
 
<option>Option 1</option> 
 
<option>Option 2</option> 
 
<option>Option 3</option> 
 
<option>Option 4</option> 
 
<option>Option 5</option> 
 
</select>

Answer 5

<option value="" selected disabled hidden>Default Text</option> 

Dejando la bandera discapacitados en ellos no impide seleccionar una opción y la bandera oculta lo eliminará de la lista. En mi caso, yo estaba usando con una lista de enumeración también y el concepto es el mismo

<select asp-for="Property" asp-items="Html.GetEnumSelectList<PropertyEnum>()"> 
         <option value="" selected disabled hidden>Select Property Enum</option> 
         <option value=""></option> 
        </select> 

Answer 6

Deja tus rápido en la primera option y desactivarlo:

<selection> 
    <option disabled selected>”Select a language”</option> 
    <option>English</option> 
    <option>Spanish</option> 
</selection> 

La primera opción será automáticamente el valor predeterminado seleccionado (lo que ve primero cuando mira el menú desplegable) pero agregar el atributo selected es más claro y realmente necesario cuando el primer campo está deshabilitado.

El atributo disabled hará que la opción no pueda seleccionarse o atenuarse.

---

Otras respuestas sugieren establecer disabled=“disabled” pero eso es sólo es necesario si tiene que analizar como XHTML, que es básicamente una versión más estricta de HTML.disabled en su versión es suficiente para HTML estándar.

---

I f desea hacer la selección “requerida” (sin aceptar la opción “Seleccionar una lengua” como una respuesta aceptada):

Añadir el atributo required a selection y establecer la primera option 's value a la cadena vacía ””.

<selection required> 
    <option disabled value=“”>Select a language</option> 
    <option>English</option> 
    <option>Spanish</option> 
</selection>