2016-07-18 4 views
3

を見つけることができます。 全く任意のwebkit-input-placeholder-moz-placeholder-moz-placeholder、または任意のCSSファイル内-ms-input-placeholderスタイルの設定はありません。はどこinput要素のデフォルトのプレースホルダのスタイルを見つけることができませんでした入力プレースホルダのスタイル

UPDATE:Guysは、私を判断するために急いではありません。 私はレガシーコード(CSSファイルの音色)を持っています。 1つのプレースホルダースタイル(font-weight、colorなど)はIE 11では正しく表示されません。プレースホルダースタイルが定義されている場所を見つけました。そして皆さんが言及したプレースホルダースタイルの宣言は見つかりませんでした。
したがって、ブラウザにプレースホルダの既定のスタイルがあると仮定します。

+0

あなたは何をしたいですか? –

+3

OPはプレースホルダをどのようにスタイルするかを尋ねるのではなく、プレースホルダのデフォルトブラウザスタイルを知りたがっています。これは 'html'や' body'や 'div'タグのデフォルトのスタイルが何であるかを聞くのと同じです。すべてのブラウザは、ユーザエージェントスタイルシートにいくつかのデフォルトを設定します。 – skyline3000

+0

あなたがここに見つけることができますhttps://css-tricks.com/almanac/selectors/p/placeholder/ –

答えて

3

WebKitのユーザエージェントスタイルシート(クローム& Safariが)ここで見つけることができます:http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

彼らのCSSを示しています。私は見つけることができません

::placeholder { 
    -webkit-text-security: none; 
    color: darkGray; 
    pointer-events: none !important; 
} 

input::placeholder, isindex::placeholder { 
    white-space: pre; 
    word-wrap: normal; 
    overflow: hidden; 
} 

を他のブラウザのデフォルトを持っている他のソースがありますが、これに近いと思います。

+1

[MDN]で述べられているように(https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder# Browser_compatibility): "Firefoxはプレースホルダテキストにデフォルトスタイルの' opacity:0.54'を適用します。 " – tektiv

+1

いいえ、Firefoxのプレースホルダーのテキストが、この不透明度と組み合わされたデフォルトの色(黒色)を使用してグレーのテキストを生成すると仮定するのは安全です。 – skyline3000

+0

これを見るには ':: - moz-placeholder {opacity:1; } '(あなたのCSSで)([example](https://jsfiddle.net/8770moe5/)を見てください) – tektiv

0

input[type="email"].user_email::-webkit-input-placeholder { 
    color: blue; 
} 

はこの回答を参照してください、あなたは vendor-prefixed selectors

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: pink; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: pink; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    color: pink; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: pink; 
} 

することはできさえスコープ要素を使用する必要がありますプレースホルダをスタイルに、Different place holder implementations and usage

0

のスタイルをご参照くださいプレースホルダ...

<input placeholder='hello'/> <br /> 
<textarea placeholder='hello'></textarea> 
0123ブラウザの多くでサポートされている例

については

/* do not group these rules */ 
*::-webkit-input-placeholder { 
    color: red; 
} 
*:-moz-placeholder { 
    /* FF 4-18 */ 
    color: red; 
} 
*::-moz-placeholder { 
    /* FF 19+ */ 
    color: red; 
} 
*:-ms-input-placeholder { 
    /* IE 10+ */ 
    color: red; 
} 
0

プレースホルダスタイリング、 はここを見て:http://caniuse.com/#feat=input-placeholder

例 -

スタイル:

<style type="text/css"> 
    input:-ms-input-placeholder { 
     color:pink; 
     font-style:italic; 
     text-transform:uppercase; 
     text-align:center; 
    } 

    input::-webkit-input-placeholder { 
     color:pink; 
     font-style:italic; 
     text-transform:uppercase; 
     text-align:center; 
    } 

    input:-moz-placeholder { 
     color:pink; 
     font-style:italic; 
     text-transform:uppercase; 
     text-align:center; 
    } 

    /* firefox 19+ */ 
    input::-moz-placeholder { 
     color:pink; 
     font-style:italic; 
     text-transform:uppercase; 
     text-align:center; 
    } 
     </style> 

HTML:

 <input type="text" placeholder="Placeholder Text" size="40"> 

Plunker上のコードを作業:https://plnkr.co/edit/bpTg4zIQfGD580XKo7q8?p=preview

関連する問題