占位符不適用於輸入，在Firefox中具有type ='number'

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嵌齒輪中的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 個解決方案

解決方案1
0 2017-05-24 17:19:30

占位符不適用於輸入，在Firefox中具有type =&#39;number&#39;

問題描述

1 個解決方案

解決方案1 0 2017-05-24 17:19:30

占位符不適用於輸入，在Firefox中具有type ='number'

解決方案1
0 2017-05-24 17:19:30