Question

这是我的示例代码：

<!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，但它有时可以正常工作，当通过第一个链接时，它总是有问题。
我正在尝试使用type ='number'设置输入占位符的样式。但是在firefox（53.0.3）中没有效果请帮忙。

Answer 1

在您的codepen中，在CSS cog。中打开autoprefixer。

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

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

1 个答案: