HTML5 入力プレースホルダーの色の変更例_html5 チュートリアルのスキル-H5 チュートリアル-php.cn

HTML5 入力プレースホルダーの色の変更例_html5 チュートリアルのスキル

WBOY

リリース： 2016-05-16 15:47:51

オリジナル

1463 人が閲覧しました

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

CSS

コードをコピー

コードは次のとおりです。

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

HTML 入力ステートメント

コードをコピー

コードは次のとおりです:

実行結果の値は灰色のままで、色: 赤は効果がありません。プレースホルダーのテキストの色を変更する方法はありますか?ブラウザに 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 および Opera12 より前のバージョンの CSS セレクターは、プレースホルダーテキストをサポートしません。疑似要素が Shadow DOM の要素の実際の役割を果たすことに注意してください。

CSSセレクター

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

コードをコピーしますコードは次のとおりです:

::-webkit-input -placeholder { /* WebKit ブラウザ */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 ～ 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19 */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10 */
color: #999;
}

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

コードをコピーしますコードは次のとおりです:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

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

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

コードをコピーします

コードは次のとおりです:

*::-webkit- input-placeholder {

色: 赤;

}
*:-moz-placeholder {
色: 赤;
*:-ms-input-placeholder {
/* IE10 */
color: red;
}

James Donnelly: Firefox と IE では、通常の入力テキストの色がプレースホルダーの色をオーバーライドします:

コードをコピーします

コードは次のとおりです: ::-webkit-input-placeholder {

色: 赤 ; テキストオーバーフロー: 省略記号;

}

:-moz-placeholder {
色: #acacac !重要; テキストオーバーフロー: 省略記号; -placeholder {
color: #acacac ! important; text-overflow: ellipsis;
} /* 将来のため */
:-ms-input-placeholder {
color: #acacac ! important ; テキストオーバーフロー: 省略記号
}

別の良い方法があります:

コードをコピーします

コードは次のとおりです:

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() == ' ' || 入力。val() == input.attr('placeholder')) {
input.addClass('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=" プレースホルダーテキスト" onfocus="this.style.color='#000';

this.value='';" style="color: #f00;"/>