html - type=number 时占位符显示的奇怪行为 - Firefox

Question

使用 :placeholder-shown输入标签上的属性，选择占位符文本可见时的状态。这在带有文本输入框和数字输入框的谷歌浏览器上按预期工作。

谷歌浏览器

当在 <input type=number> 上使用时，Firefox 似乎忽略这个属性字段

火狐:

问题:为什么会发生这种情况，如何克服？

演示片段

input:placeholder-shown {
    background: #000;
}

<input placeholder="example">
<input placeholder="example" value="12345">
<br>
<input placeholder="example" type="number">
<input placeholder="example" type="number" value="12345">

Answer 1

:placeholder-shown 在 type="number"、type="time"和类似的 firefox 中不受支持。

这是 refrence

但是您可以使用 ::-moz-placeholder

解决它

见下面的代码:

input:placeholder-shown {
    background: #000;
}
input::-moz-placeholder {
  background: #000;
  color: #ddd;
  opacity: 1;
}

<input placeholder="example">
<input placeholder="example" value="12345">
<br>
<input placeholder="example" type="number">
<input placeholder="example" type="number" value="12345">