添加占位符文本以选择输入 - firefox

Question

我无法获取占位符文本以便在Firefox中显示选择下拉输入。它在IE和Chrome中运行良好。

我的CSS：

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

我的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>

它在chrome中的外观

它在firefox中的外观

Answer 1

您可以使用以下格式添加月份值选项，它将充当占位符，并且它将在chrome和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

我认为选择占位符不支持Mozilla。而是可以使用所选属性添加具有空值的选项。例如，

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