web-dev-qa-db-fra.com

espace réservé pour la balise select

Est-il possible d'avoir un espace réservé sur une balise select?

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

ou peut être un travail possible autour?

html5css3
61
Dalton Pereira

EDIT: Cela a fonctionné/fonctionne au moment où je l'ai écrit, mais comme Blexen l'a fait remarquer, ce n'est pas dans les spécifications 

Ajoutez une option comme celle-ci: 

<option default>Select Your Beverage</option>

La bonne manière:

<option selected="selected">Select Your Beverage</option>
36
General_Twyckenham

Selon Mozilla Dev Network , placeholder n'est pas un attribut valide pour une entrée <select>.

Ajoutez plutôt une option avec une variable value et l'attribut selected vides, comme indiqué ci-dessous. L'attribut value vide est obligatoire pour empêcher le comportement par défaut consistant à utiliser le contenu du <option> en tant que valeur de <option>.

<select>
    <option value="" selected>select your beverage</option>
    <option value="tea">Tea</option>
    <option value="coffee">Coffee</option>
    <option value="soda">Soda</option>
</select>

Dans les navigateurs modernes, l'ajout de l'attribut required à l'élément <select> n'autorisera pas l'utilisateur à soumettre le formulaire auquel l'élément appartient si l'option sélectionnée a une valeur vide.

Si vous souhaitez styler l'option par défaut dans la liste (qui apparaît lorsque vous cliquez sur l'élément)}, un nombre limité de propriétés CSS sont bien prises en charge. color et background-color sont les 2 paris les plus sûrs, les autres propriétés CSS sont susceptibles d'être ignorées.

Dans mon option, la meilleure façon (en HTML5) de marquer l’option par défaut consiste à utiliser les attributs personnalisés data-*.1 Voici comment styliser l'option par défaut à estompée:

select option[data-default] {
  color: #888;
}
<select>
  <option value="" selected data-default>select your beverage</option>
  <option value="tea">Tea</option>
  <option value="coffee">Coffee</option>
  <option value="soda">Soda</option>
</select>

Cependant, cela ne fera que styler l'élément dans la liste déroulante, pas la valeur affichée sur l'entrée. Si vous souhaitez styler cela avec CSS, ciblez directement votre élément <select>. Dans ce cas, vous ne pouvez modifier le style de l'élément sélectionné qu'à tout moment.2

Si vous voulez rendre un peu plus difficile la sélection de l'élément par défaut pour l'utilisateur, vous pouvez définir la règle CSS display: none; sur le <option>, mais rappelez-vous que ceci ne le fera pas empêche les utilisateurs de le sélectionner ( en utilisant, par exemple, les touches fléchées/en tapant), cela leur rend la tâche plus difficile.

1 Cette réponse recommandait auparavant l’utilisation d’un attribut default qui n’est pas standard et qui n’a aucune signification en soi.
2 Il est techniquement possible de styler la sélection elle-même en fonction de la valeur sélectionnée à l'aide de JavaScript, mais cela sort du cadre de cette question. Cette réponse couvre toutefois cette méthode.

65
SeinopSys
<select>

    <option selected="selected" class="Country">Country Name</option>

    <option value="1">India</option>

    <option value="2">us</option>

</select>

 

.country
{


    display:none;
}

</style>
10
manish mohanan

Oui c'est possible

Vous pouvez le faire en utilisant uniquement HTML. Vous devez définir la sélection par défaut les options disabled="" et selected="" et sélectionnez la balise required="". Le navigateur n'autorise pas l'utilisateur à soumettre le formulaire sans sélectionner un option.

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>
3
Thusitha Wickramasinghe

Il existe un plugin Select2 permettant de définir beaucoup de choses sympas avec un espace réservé. C'est un remplacement jQuery pour les boîtes sélectionnées. Voici un site officiel https://select2.github.io/examples.html

Le problème est que si vous souhaitez désactiver l’option de recherche sophistiquée, veuillez utiliser le jeu d’options suivant.

data-plugin-options='
{ 
    "placeholder": "Select status",
    "allowClear": true, 
    "minimumResultsForSearch": -1
}

J'aime particulièrement l'option allowClear.

Je vous remercie.

1
Yevgeniy Afanasyev

C'est ma fonction pour l'espace réservé de la boîte de sélection.

HTML

<select name="country" id="country">
  <option value="" disabled selected>Country</option>
  <option value="c1">England</option>
  <option value="c2">Russia</option>
  <option value="c3">USA</option>
</select>

jQuery

     jQuery(function($) {
      /*function for placeholder select*/
      function selectPlaceholder(selectID){
        var selected = $(selectID + ' option:selected');
        var val = selected.val();
        $(selectID + ' option' ).css('color', '#333');
        selected.css('color', '#999');
        if (val == "") {
          $(selectID).css('color', '#999');
        };
        $(selectID).change(function(){
          var val = $(selectID + ' option:selected' ).val();
          if (val == "") {
            $(selectID).css('color', '#999');
          }else{
            $(selectID).css('color', '#333');
          };
        });
      };

      selectPlaceholder('#country');

    });
1
Andrey Kartavtsev

Pas besoin de prendre n'importe quel javascript ou n'importe quelle méthode, vous pouvez simplement le faire avec votre CSS html

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Css

.s
{
    color:white;
        font-size:0px;
    display:none;
}
0
Amitpal Singh