ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML5入力プレースホルダーの色の変更

HTML5入力プレースホルダーの色の変更

不言オリジナル: 2018-06-28 15:29:161702ブラウズ

この記事では主に HTML5 入力プレースホルダーの色の変更に関する知識を紹介します。必要な友人は参照してください。

Chrome は input=[type=text] プレースホルダーテキスト属性をサポートしていますが、次の CSS スタイルは機能しません:

CSS

input[placeholder], [placeholder], *[placeholder] { 
color:red !important; 
}

HTML 入力ステートメント

<input type="text" placeholder="Value" />

実行結果の値は灰色のままで、色: 赤は効果がありません。プレースホルダーのテキストの色を変更する方法はありますか?ブラウザに jQuery プレースホルダーテキストプラグインをインストールしましたが、まだ機能しません。 (! important は IE7 と Firefox でのみ認識されます)

回答:

toscho: 実装方法には、疑似要素、疑似クラス、Notihing の 3 つがあります。
WebKit と Blink (Safari、Google Chrome、Opera15 以降) は疑似要素を使用します

::-webkit-input-placeholder

Mozilla Firefox 4-18 は疑似クラスを使用します

:-moz-placeholder

Mozilla Firefox 19 以降は疑似要素を使用します

::-moz-placeholder

IE10 は疑似クラスを使用します

:-ms-input-placeholder

IE9 および Opera バージョン 12 より前の CSS セレクターは、プレースホルダーテキストをサポートしていません。疑似要素が Shadow DOM の要素の実際の役割を果たすことに注意してください。

CSSセレクター

各ブラウザのCSSセレクターが異なるため、ブラウザごとに個別の設定が必要です。

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #999; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #999; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #999; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #999; 
}

Matt: textareas (伸縮可能なテキストボックス) スタイルのコードは次のとおりです:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #636363; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #636363; 
}

brillout.com: input と Textarea のフォントの色は赤です。すべてのスタイルは異なるセレクターに固有である必要があり、全体としてパッケージ化しないでください。いずれかのスタイルが失敗すると、他のスタイルも失敗するためです。

*::-webkit-input-placeholder { 
color: red; 
} 
*:-moz-placeholder { 
color: red; 
} 
*:-ms-input-placeholder { 
/* IE10+ */ 
color: red; 
}

James Donnelly: Firefox と IE で、プレースホルダーの色を通常の入力テキストの色で上書きする方法:

::-webkit-input-placeholder { 
color: red; text-overflow: ellipsis; 
} 
:-moz-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
} 
::-moz-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
} /* for the future */ 
:-ms-input-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
}

もう 1 つの良い方法があります:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #666; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #666; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #666; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #666; 
}

最後の方法はオンラインで見つかりました:

$(&#39;[placeholder]&#39;).focus(function() { 
var input = $(this); 
if (input.val() == input.attr(&#39;placeholder&#39;)) { 
input.val(&#39;&#39;); 
input.removeClass(&#39;placeholder&#39;); 
} 
}).blur(function() { 
var input = $(this); 
if (input.val() == &#39;&#39; || input.val() == input.attr(&#39;placeholder&#39;)) { 
input.addClass(&#39;placeholder&#39;); 
input.val(input.attr(&#39;placeholder&#39;)); 
} 
}).blur(); 
$(&#39;[placeholder]&#39;).parents(&#39;form&#39;).submit(function() { 
$(this).find(&#39;[placeholder]&#39;).each(function() { 
var input = $(this); 
if (input.val() == input.attr(&#39;placeholder&#39;)) { 
input.val(&#39;&#39;); 
} 
}) 
});

このコードを呼び出すためのルールは、最初に Javascript をロードし、次に CSS を使用してプレースホルダー属性を変更することです。

form .placeholder { 
color: #222; 
font-size: 25px; 
/* etc */ 
}

user1729061: CSS とプレースホルダーテキストを使用しなくても、同じ効果を得ることができます。

input type="text" value="placeholder text" onfocus="this.style.color=&#39;#000&#39;; 
this.value=&#39;&#39;;" style="color: #f00;"/>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

HTML5入力プレースホルダーの色の変更

関連記事