占位符不适用于输入，在 Firefox 中具有 type='number'

这是我的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>«Bug»</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        input[type='number'] {
            background: gray;
        }
        input[type='number']::-webkit-input-placeholder {
            color: red;
        }
        input[type='number']::-moz-placeholder {
            color: red;
        }
        input[type='number']:-ms-input-placeholder {
            color: red;
        }
        input[type='number']::placeholder {
            color: red;
        }
    </style>
</head>
<body style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
    <input type="number" placeholder="buggy bug">
</body>
</html>

您也可以在此处查看：http://g1un.ru/bug/bug.html
我还做了一个"笔"http://codepen.io/g1un/pen/GmzaEg 但它有时会正常工作，当通过第一个链接它总是有问题时。
我正在尝试使用类型='数字'来设置输入占位符的样式。但是在火狐(53.0.3(中它不起作用。
请帮忙。

在代码笔中，打开 CSS 齿轮中的自动前缀。

input[type='number'] {
  background: gray;
  &::placeholder {
    color: red;
  }
}

键入此内容 - 然后查看带有V图标的 CSS 窗格的 CSS 输出。

这将帮助您查看正确的前缀。

input[type='number'] {
  background: gray;
}
input[type='number']::-webkit-input-placeholder {
  color: red;
}
input[type='number']::-moz-placeholder {
  color: red;
}
input[type='number']:-ms-input-placeholder {
  color: red;
}
input[type='number']::placeholder {
  color: red;
}

另一个注意事项 - 在上面的示例中，您的 <style> 标签应该在<head>中 -

相关内容

最新更新

热门标签：