佔位符不能在Firefox中的輸入工作，具有類型=「號」

這裏是我的示例代碼：佔位符不能在Firefox中的輸入工作，具有類型=「號」

<!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）中沒有效果。
請幫忙。

來源

2017-05-24 g1un

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

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

類型這一點 - 然後看一下CSS面板的CSS輸出與V圖標。

這將幫助您看到正確的前綴。

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

來源

2017-05-24 17:19:30 sheriffderek

感謝。根據你的回答，我在這裏更新了我的代碼http://g1un.ru/bug/bug.html。但仍然沒有效果。剛剛注意到，如果我打開並關閉devtools，風格開始起作用。 – g1un

佔位符不能在Firefox中的輸入工作，具有類型=「號」

回答

相關問題