Ajout de texte d'espace réservé pour sélectionner une entrée - firefox

Question

Je rencontre des problèmes pour obtenir du texte d'espace réservé pour une entrée de liste déroulante sélectionnée à afficher dans Firefox. Cela fonctionne très bien dans IE et Chrome.

Mon CSS:

select option:first-child {color: #666666;display: none;} 

Mon HTML:

<select name="exp_date" id="exp_date" style="width: 50%; display: inline; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-right: none; cursor: pointer;" class="form-control" title="Enter Expiration Date - Month"> 
    <option selected="" value="" label="Month"> 
    </option><option value="01" label="1">1 
    </option><option value="02" label="2">2 
    </option><option value="03" label="3">3 
    ... 
</select> 

quoi il ressemble en chrome

quoi il ressemble dans Firefox

Answer 1

Vous pouvez ajouter l'option avec la valeur de mois en format ci-dessous il agira comme espace réservé et il Worki en chrome ainsi que Firefox.

<select name="exp_date" id="exp_date" style="width: 50%; display: inline; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-right: none; cursor: pointer;" class="form-control" title="Enter Expiration Date - Month"> 
     <option value="" selected disabled hidden>Month</option> 
     </option><option value="01" label="1">1 
     </option><option value="02" label="2">2 
     </option><option value="03" label="3">3 
     ... 
    </select> 

Answer 2

Je crois que l'espace réservé sur select n'est pas supporté par Mozilla. Vous pouvez plutôt ajouter une option avec une valeur vide avec l'attribut sélectionné. Par exemple,

<option selected="selected" disabled hidden>Month</option>