CSSでHTML5入力のプレースホルダー色を変更します
-
25-09-2019 - |
質問
Chromeはをサポートします プレースホルダー属性 の上 input[type=text]
要素(他の人もおそらくそうします)。
しかし、以下 CSS
プレースホルダーの価値に何もしません:
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}
<input type="text" placeholder="Value">
Value
まだ残ります grey
それ以外の red
.
プレースホルダーテキストの色を変更する方法はありますか?
解決
実装
3つの異なる実装があります:擬似要素、擬似クラス、そして何もありません。
- WebKit、Blink(Safari、Google Chrome、Opera 15+)、Microsoft Edgeは、擬似要素を使用しています。
::-webkit-input-placeholder
. [ref] - Mozilla Firefox 4〜18は擬似クラスを使用しています。
:-moz-placeholder
(1 結腸)。 [ref] - Mozilla Firefox 19+は擬似要素を使用しています。
::-moz-placeholder
, 、しかし、古いセレクターはまだしばらく動作します。 [ref] - Internet Explorer 10と11は擬似クラスを使用しています。
:-ms-input-placeholder
. [ref] - 2017年4月: ほとんどの最新のブラウザは、シンプルな擬似要素をサポートしています
::placeholder
[ref]
Internet Explorer 9以下はサポートしていません placeholder
まったく属性 オペラ12以下はサポートしません プレースホルダー向けのCSSセレクター。
最高の実装に関する議論はまだ続いています。擬似要素は、実際の要素のように機能することに注意してください シャドウドム. 。 a padding
で input
擬似要素と同じ背景色を取得しません。
CSSセレクター
ユーザーエージェントは、未知のセレクターを使用してルールを無視する必要があります。見る セレクターレベル3:
a グループ 無効なセレクターを含むセレクターの無効です。
そのため、各ブラウザに個別のルールが必要です。それ以外の場合、グループ全体がすべてのブラウザによって無視されます。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
使用法
- 悪いコントラストを避けるように注意してください。 Firefoxのプレースホルダーは不透明度が低下してデフォルトであるように見えるため、使用する必要があります
opacity: 1
ここ。 - プレースホルダーのテキストは、収まらない場合に遮断されていることに注意してください - 入力要素のサイズ
em
最小のフォントサイズの大きな設定でテストします。翻訳を忘れないでください:いくつかの言語 もっと部屋が必要です 同じ言葉のために。 - HTMLサポートを備えたブラウザ
placeholder
ただし、CSSがなければ(オペラのような)サポートもテストする必要があります。 - 一部のブラウザは、一部に追加のデフォルトCSSを使用しています
input
種類 (email
,search
)。これらは、予期しない方法でレンダリングに影響を与える可能性があります。使用 プロパティ-webkit-appearance
と-moz-appearance
それを変えるために。例:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
他のヒント
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
opacity: 1;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
opacity: 1;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
*::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
*::placeholder {
/* modern browser */
color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>
これはすべてスタイルを整えます input
と textarea
プレースホルダー。
重要な注意点: これらのルールをグループ化しないでください。代わりに、すべてのセレクターに対して個別のルールを作成します(グループ内の1つの無効なセレクターがグループ全体を無効にします)。
Textareasをスタイリングすることもできます。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
Toschoの回答に加えて、Chrome 9-10とSafari 5の間のWebKitの矛盾が、注目に値するCSSプロパティをサポートしていることに気付きました。
具体的には、Chrome 9および10はサポートしていません background-color
, border
, text-decoration
と text-transform
プレースホルダーをスタイリングするとき。
完全なクロスブラウザーの比較はです ここ.
為に サス ユーザー:
// Create placeholder mixin
@mixin placeholder($color, $size:"") {
&::-webkit-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&::-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-ms-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
@include placeholder(red, 10px);
}
これは正常に機能します。 ここでデモ:
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;
}
<input type="text" placeholder="Value" />
FirefoxおよびInternet Explorerでは、通常の入力テキストの色がプレースホルダーの色プロパティをオーバーライドします。だから、そうする必要があります
::-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;
}
クロスブラウザーソリューション:
/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
クレジット: デビッド・ウォルシュ
新しいものを使用します ::placeholder
使用する場合 Autoprefixer.
.placeholder mixinから ブートストラップ これを支持して非難されています。
例:
input::placeholder { color: black; }
Autoprefixerを使用する場合、上記はすべてのブラウザの正しいコードに変換されます。
これで、入力のプレースホルダーにCSSを適用する標準的な方法があります。 ::placeholder
擬似要素から これ CSSモジュールレベル4ドラフト。
Mozilla Firefox 19+にとって、ブラウザがプレースホルダーに不透明な価値を提供することを理解しているので、色はあなたが本当に望んでいるものではありません。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #eee; opacity:1;
}
上書きします opacity
1のために、行くのは良いことです。
このコードスニペットをインターネット上で見つけた場所を覚えていません(私が書いたのではなく、どこで見つけたのか、誰が書いたのか覚えていません)。
$('[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コードをロードして、このルールを呼び出すことにより、PlaceHolderをCSSで編集するだけです。
form .placeholder {
color: #222;
font-size: 25px;
/* etc. */
}
プレースホルダーは入力タイプのテキストにのみ必要であるため、このコードは機能すると思います。したがって、この1行のCSSはあなたの必要性に十分でしょう:
input[type="text"]::-webkit-input-placeholder {
color: red;
}
使用している場合 ブートストラップ そして、これを機能させることができませんでしたが、おそらくあなたはブートストラップ自体がこれらのセレクターを追加するという事実を見逃したでしょう。これは私たちが話しているブートストラップv3.3です。
内部のプレースホルダーを変更しようとしている場合 .Form-Control CSSクラスでは、次のようにオーバーライドする必要があります。
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #777;
opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #777;
opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #777;
}
この短くてきれいなコード:
::-webkit-input-placeholder {color: red;}
:-moz-placeholder {color: red; /* For Firefox 18- */}
::-moz-placeholder {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder {color: red;}
これはどう
<input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;" />
CSSやプレースホルダーはありませんが、同じ機能を取得します。
ここでは、モバイルプラットフォームで色を変更するためにあらゆる組み合わせを試しましたが、最終的には次のとおりです。
-webkit-text-fill-color: red;
それはトリックをしました。
SASS/SCSSユーザーを使用しています バーボン, 、機能が組み込まれています。
//main.scss
@import 'bourbon';
input {
width: 300px;
@include placeholder {
color: red;
}
}
CSS出力では、この部分をつかんでコードに貼り付けることもできます。
//main.css
input {
width: 300px;
}
input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
さまざまな入力要素の異なるスタイルについて、このコードを試してください
your css selector::-webkit-input-placeholder { /*for webkit */
color:#909090;
opacity:1;
}
your css selector:-moz-placeholder { /*for mozilla */
color:#909090;
opacity:1;
}
your css selector:-ms-input-placeholder { /*for for internet exprolar */
color:#909090;
opacity:1;
}
例1:
input[type="text"]::-webkit-input-placeholder { /*for webkit */
color: red;
opacity:1;
}
input[type="text"]:-moz-placeholder { /*for mozilla */
color: red;
opacity:1;
}
input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */
color: red;
opacity:1;
}
例2:
input[type="email"]::-webkit-input-placeholder { /*for webkit */
color: gray;
opacity:1;
}
input[type="email"]:-moz-placeholder { /*for mozilla */
color: gray;
opacity:1;
}
input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */
color: gray;
}
もう1つの例があります。
.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
}
h1 {
color: red;
}
<div class="col-sm-4">
<input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>
実際の非常に素晴らしくシンプルな可能性を追加します: CSSフィルター!
プレースホルダーを含むすべてのスタイルをスタイリングします。
以下は、色の変化のために色相フィルターを使用して、同じパレットに両方の入力を設定します。ブラウザで非常によくレンダリングされます(ie ...を除く)
input {
filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />
ユーザーが動的に変更できるようにするには、変更に入力タイプの色を使用して、またはニュアンスを見つけるために、このスニペットをチェックしてください。
から: https://codepen.io/nico_krazhtest/pen/bwexeb
function stylElem() {
stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
out.innerText = e.style.cssText
})()}
stylElem()
<div id="out"></div> <p>
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />
Colors (change me)->
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br>
<video controls src="#"></video>
CSSフィルタードキュメント: https://developer.mozilla.org/en-us/docs/web/css/filter
OK、プレースホルダーはさまざまなブラウザーで異なる動作をしているため、CSSでブラウザプレフィックスを使用して同一にする必要があります。たとえば、Firefoxはデフォルトでプレースホルダーに透明性を与えます。ほとんどの場合、大きな懸念ですが、それらを一貫させるのは良いことです:
*::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
color: #ccc;
opacity: 1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
opacity: 1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ccc;
}
CSSでHTML5入力のプレースホルダー色を変更できます。偶然、CSSが競合する場合、このコードノートは機能している場合、以下のように(!重要)を使用できます。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#909 !important;
opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#909 !important;
opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color:#909 !important;
}
<input placeholder="Stack Snippets are awesome!">
これが役立つことを願っています。
これを入力スタイルとフォーカススタイルに使用できます。
input::-webkit-input-placeholder { color:#666;}
input:-moz-placeholder { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
最も簡単な方法は次のとおりです。
#yourInput::placeholder {
color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
color: red;
}
方位磁針 箱から出してこれのためのミックスインがあります。
あなたの例を取ります:
<input type="text" placeholder="Value">
コンパスを使用したSCSSでは:
input[type='text'] {
@include input-placeholder {
color: #616161;
}
}
これが解決策です CSSセレクター
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
- webkit、blink (Safari、Google Chrome、Opera 15+) と マイクロソフトエッジ 擬似要素を使用しています:
:: -webkit-input-placeholder。 - Mozilla Firefox 4〜18 擬似クラスを使用しています:
:-moz-placeholder(1つのコロン)。
Mozilla Firefox 19+ 擬似要素を使用しています:
::-moz-placeholderですが、古いセレクターはしばらく動作します。 - インターネットエクスプローラー10および11 擬似クラスを使用しています:
:-ms-input-placeholder。 - インターネットエクスプローラー9 Lowerはプレースホルダー属性をまったくサポートしていませんが、Opera 12以下はプレースホルダー向けのCSSセレクターをサポートしていません。
HTMLの一部:
<form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
CSSによる「Enter文」の表現の色を変える方法を示すつもりです:
::placeholder{
color:blue;
}