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

menus en html codigo

Question

Tengo un menú desplegable donde el usuario selecciona un idioma:

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

1. Quiero que la opción predeterminada que se muestra inicialmente diga "Seleccionar un idioma" en lugar de "Inglés" (mi primera opción, que se muestra de manera predeterminada).
2. No quiero que el usuario pueda seleccionar "Seleccionar un idioma".

Answer 1

Basándose en la respuesta de Oded, también puede establecer la opción predeterminada pero no convertirla en una opción seleccionable si solo se trata de un texto ficticio. Por ejemplo, podrías hacer:

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

Esto mostraría "Seleccionar un idioma" antes de que el usuario haga clic en el cuadro de selección, pero el usuario no podría seleccionarlo debido al atributo deshabilitado.

Answer 2

Coloque su mensaje en la primera option y desactívelo:

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

La primera opción será automáticamente la predeterminada seleccionada (la que ve primero cuando mira el menú desplegable) pero agregar el atributo selected es más claro y realmente necesario cuando el primer campo es un campo deshabilitado.

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

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

Si desea hacer la selección "requerida" (sin aceptar la opción "Seleccionar un idioma" como respuesta aceptada):

Agregue el atributo required a la selection y establezca el valor de la primera option en la cadena vacía ”” .

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

Answer 3

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

Para seleccionar una opción predeterminada que no sea la primera, agregue un atributo selected a esa opción:

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

Puede leer la especificación de HTML 4.01 con respecto a los valores predeterminados en el elemento seleccionado.

Sugiero leer un buen libro HTML si necesitas aprender conceptos básicos de HTML como este: recomiendo Head First HTML .

Answer 4

Simplemente haga la opción n. ° 1 Seleccione Idioma:

Demo en vivo

Answer 5

.selectmenu{
  
 -webkit-appearance: none;  /*Removes default chrome and safari style*/
 -moz-appearance: none; /* Removes Default Firefox style*/
 background: #0088cc ;
 width: 200px; /*Width of select dropdown to give space for arrow image*/
 text-indent: 0.01px; /* Removes default arrow from firefox*/
 text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
 color: #FFF;
 border-radius: 2px;
 padding: 5px;
    border:0 !important;
 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 6

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

Dejar la bandera desactivada impide que no seleccionen una opción y la bandera oculta la eliminará de la lista. En mi caso, también lo estaba usando con una lista de enumeración y el concepto tiene el mismo

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