web-dev-qa-db-fra.com

Comment définir une description par défaut non sélectionnable dans un menu de sélection (liste déroulante) en HTML?

J'ai un menu déroulant où l'utilisateur sélectionne une langue:

<select>
    <option>English</option>
    <option>Spanish</option>
</select>
  1. Je veux que l’option par défaut initialement affichée dise "Sélectionnez. Une langue." Au lieu de "Anglais" (ma première option, affichée par Défaut).
  2. Je ne veux pas que l'utilisateur puisse sélectionner "Choisir une langue".
htmlhtml-select
33
RSM

Si aucune des options de la sélection n'a d'attribut selected, la première option sera celle sélectionnée.

Afin de sélectionner une option par défaut qui n'est pas la première, ajoutez un attribut selected à cette option:

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

Vous pouvez lire la spécification HTML 4.01 concernant les valeurs par défaut dans l’élément select.

Je suggère de lire un bon livre HTML si vous devez apprendre les bases du HTML comme ceci - Je recommande Head First HTML .

45
Oded

En vous appuyant sur la réponse de Oded, vous pouvez également définir l'option par défaut, mais pas en faire une option sélectionnable s'il ne s'agit que d'un texte factice. Par exemple, vous pourriez faire:

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

Cela afficherait "Sélectionnez une langue" avant que l'utilisateur ne clique sur la zone de sélection, mais l'utilisateur ne pourrait pas la sélectionner en raison de l'attribut désactivé.

55
Glen Selle

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

5
Ashok

Il suffit de faire l'option n ° 1 Sélectionnez la langue:

Démo en direct

3
Myles Gray

Bien que cette question ait une réponse acceptée mais je pense que ceci est un moyen beaucoup plus propre d’atteindre le résultat souhaité

<select required>
<option value="">Select</option>
<option>English</option>
<option>Spanish</option>
</select>

L'attribut required dans rend obligatoire la sélection de une option de la liste.

value = "" à l'intérieur de la balise d'option combinée à l'attribut required de la balise de sélection permet de sélectionner l'option ' Select ' non admissible, permettant ainsi d'obtenir le rendement requis

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

Le fait de laisser l'indicateur désactivé les empêche de ne pas sélectionner une option et l'indicateur masqué le supprimera de la liste. Dans mon cas, je l’utilisais aussi avec une liste enum et le concept est le même.

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

Placez votre invite dans la 1ère option et désactivez-la:

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

La première option sera automatiquement la valeur sélectionnée par défaut (ce que vous voyez en premier lorsque vous regardez le menu déroulant), mais l'ajout de l'attribut selected est plus clair et est réellement nécessaire lorsque le premier champ est un champ désactivé.

L'attribut disabled rendra l'option non sélectionnable/grisée.

D’autres réponses suggèrent de définir disabled=“disabled”, mais cela n’est nécessaire que si vous devez analyser en XHTML, qui est fondamentalement une version plus stricte de HTML. disabled est suffisant pour HTML standard.

I si vous souhaitez effectuer la sélection "obligatoire" (sans accepter l'option "Sélectionnez une langue" comme réponse acceptée):

Ajoutez l’attribut required à selection et définissez la première option ’s value sur la chaîne vide ””.

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