2017-05-24 2 views
0

でタイプ=「数」を有する、入力では動作しません私の例のコードは次のとおりです。プレースホルダは、ここでは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)では効果がありません。
お願いします。

答えて

0

コードコーンで、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; 
} 

別のノート -

+0

感謝 - 上記のあなたの例では、あなたの<style>タグは<head>にする必要があります。あなたの答えに応じて私のコードをhttp://g1un.ru/bug/bug.htmlで更新しました。しかし、まだ効果はありません。ちょうど私が開いて、近くのdevtoolsスタイルが動作するようになったときに注意してください。 – g1un

関連する問題