web-dev-qa-db-ja.com

CSSを使用して入力のHTML5プレースホルダーカラーを変更しても、Chrome

次のトピックを実行しようとしましたが、失敗しました。 CSSを使用してHTML5入力のプレースホルダーの色を変更する

プレースホルダーに色を付けようとしましたが、まだChrome 17.0.963.56 m。

[〜＃〜] html [〜＃〜]

<input type='text' name='test' placeholder='colorize placeholder' value='' />

[〜＃〜] css [〜＃〜]

INPUT::-webkit-input-placeholder, 
INPUT:-moz-placeholder {
    color:red;
}
input[placeholder], [placeholder], *[placeholder]
{
    color:green !important;
}

JSfiddle

Firefox 10.0.2では、うまく機能します。

cssgoogle-chromeplaceholder
39
el-teedee

:。そのため、セレクター全体が破損し、機能しませんでした。 http://jsfiddle.net/a96f6/87/

編集:(更新後？）これはもう機能しないようです、これを試してください：

input::-webkit-input-placeholder{
    color:red;
}
input:-moz-placeholder {
    color:red;
}

注：ベンダープレフィックスセレクター（-moz、-webkit、-ms、...）を混在させないでください。 Chromeは、たとえば「-moz-」を理解せず、セレクタ全体を無視します。

明確にするために編集：すべてのブラウザで動作させるには、このコードを使用します：

::-webkit-input-placeholder {
    color:red;
}

::-moz-placeholder {
    color:red;
}

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

77
Alex

@Alexが言ったように、何らかの理由で、複数のブラウザーのセレクターを組み合わせることができません。

これ動作します

::-webkit-input-placeholder {
    color:red;
}

::-moz-placeholder {
    color:red;
}

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

しかし、これは動作しません（in Chrome少なくとも）：

::-webkit-input-placeholder,
::-moz-placeholder,
::-ms-placeholder,
::placeholder {
    color:red;
}

私には、ブラウザの実装の癖のように見えます。

また、プレースホルダースタイルをグローバルに定義する必要はありませんが、::placeholderセレクターは、通常のように使用します。これは動作します：

.my-form .input-text::-webkit-input-placeholder {
    color:red;
}

.my-form .input-text::-moz-placeholder {
    color:red;
}
21
Dmitry Pashkevich

私はちょうど同じ問題を経験し、共有するのが良いと思いました。何らかの理由で、Firefoxで色が変化せず、16進値を使用するときにのみ色が変わることに気づいたので、特定のWebサイトに対して次のようにしました。

::-webkit-input-placeholder {
    color: #666666;
}

::-moz-placeholder {
    color: black;
}

::-ms-placeholder {
    color: #666666;
}

::placeholder {
    color: #666666;
}
4
deSousa
::-webkit-input-placeholder {
    color: #008000;
}
0
Michael Christensen