html - 消す - textarea placeholder 色




CSSでHTML5入力のプレースホルダの色を変更する (20)

Chromeはinput[type=text]要素のプレースホルダ属性をサポートしています (おそらく他の要素もあります)。

しかし、次のCSSはプレースホルダの値に何もしません:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Valueはまだred代わりにgreyままです。

プレースホルダテキストの色を変更する方法はありますか?


実装

擬似要素、擬似クラス、および何もない3つの異なる実装があります。

  • WebKit、Blink(Safari、Google Chrome、Opera 15+)とMicrosoft Edgeは、疑似要素::-webkit-input-placeholderます。 [ Ref ]
  • Mozilla Firefox :-moz-placeholderは疑似クラス:-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属性をまったくサポートしていませんが、 Opera 12以前はプレースホルダのCSSセレクタをサポートしていません

最良の実装についての議論はまだ進行中です。 擬似要素は、 影のDOMで実際の要素のように動作することに注意してください。 input上のpaddingは、擬似要素と同じ背景色を取得しません。

CSSセレクタ

ユーザエージェントは、セレクタが不明なルールを無視する必要があります。 セレクタレベル3

無効なセレクタを含むセレクタのgroupは無効です。

そのため、ブラウザごとに個別のルールが必要です。 それ以外の場合、グループ全体はすべてのブラウザで無視されます。

::-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で指定し、最小のフォントサイズ設定でテストしてください。 翻訳を忘れないでください:同じ言語のために、 より多くの部屋必要な言語もあります
  • placeholderをHTMLでサポートしているが、OperaのようなCSSをサポートしていないブラウザもテストする必要があります。
  • 一部のブラウザでは、一部のinputタイプ( emailsearch )にデフォルトのCSSが追加されています。 これらは予期しない方法でレンダリングに影響する可能性があります。 変更するには、 properties -webkit-appearanceおよび-moz-appearanceを使用しproperties 。 例:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

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!">

これが役立つことを願っています。


toschoの回答に加えて、Chrome 9-10とSafari 5の間にいくつかのウェブキットの不一致があることに気付きました。

具体的には、プレースホルダのスタイリング時に、クロム9と10はbackground-colorbordertext-decorationtext-transformサポートしていません。

完全なブラウザ間比較がhereありhere


Bourbonを使用しているSASS / SCSSユーザーの場合、組み込み関数があります。

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Outputを使用して、この部分をつかんでコードに貼り付けることもできます。

//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;
}

Sassユーザーの場合:

// 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);
}

Bootstrapを使用していて、これが動作しない場合は、ブートストラップ自体がこれらのセレクタを追加するという事実を忘れていた可能性があります。 これは私たちが話しているBootstrap 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;
}

Bootstrapユーザーの場合、 class="form-control"を使用している場合は、CSSの特定の問題がある可能性があります。 あなたはより高い優先度を得るべきです:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

または、 Lessを使用している場合:

.form-control{
    .placeholder(red);
}

autoprefixerを使用する場合は、新しい::placeholderを使用してautoprefixer

Bootstrapの.placeholder mixinはこれに賛成して非難されることに注意してください。

例:

input::placeholder { color: black; }

オートプレフィクサーを使用する場合、上記はすべてのブラウザーの正しいコードに変換されます。


これで、CSSの入力プレースホルダにCSSを適用する標準的な方法があります: this CSSモジュールレベル4ドラフトからの::placeholder擬似要素。


これはどう

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

CSSやプレースホルダはありませんが、同じ機能が得られます。


これを試してみると、これはあなたのすべてのブラウザでうまくいくでしょう:

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

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

もう一つの例があります:

.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>


テキストエリアをスタイルすることもできます:

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

プレースホルダは入力タイプのテキストにのみ必要なので、このコードは機能すると思います。 だから、この1行のCSSはあなたの必要性に十分です:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

別のブラウザでプレースホルダの動作が違うので、CSSのブラウザプレフィックスを使用して同じものにする必要があります。たとえば、Firefoxではデフォルトでプレースホルダに透明性があるため、CSSに不透明度1を加え、大部分の時代は大きな懸念を抱いていましたが、

*::-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フィルタ

プレースホルダを含むすべてのスタイルを適用します。

次の例では、色の変更に色相フィルタを使用して、同じパレットに両方の入力を設定します。 それは非常によくブラウザでレンダリングされます(ただし...を除く)

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 : 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 : https://developer.mozilla.org/en-US/docs/Web/CSS/filter


異なるスタイルの異なる入力要素に対してこのコードを試してみてください

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;
   }

私は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;
}

私は1のopacityを上書きするので、行くのが良いでしょう。


私は私のモバイルプラットフォーム上で色を変更するためにここにすべての組み合わせを試して、そして最終的にはそれでした:

-webkit-text-fill-color: red;

それはトリックでした。


/* 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>

これにより、すべてのinputtextareaプレースホルダがスタイルされます。

重要な注意:これらのルールはグループ化しないでください。 代わりに、すべてのセレクタに対して個別のルールを作成します(グループ内の1つの無効セレクタがグループ全体を無効にします)。





html-input