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

この記事では主に 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; 
}

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

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

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

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

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

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

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

関連する推奨事項:

PHP と HTML5 FormData を使用して、更新不要のファイル アップロードを実現します

HTML5 はカスタム コントロールに DOM を使用します

html5 キャンバスの実装により、単純な四角形と三角形を描画します

以上がHTML5入力プレースホルダーの色の変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。