Edited at

[css,html5] placeholder属性のテキストカラーを変更

More than 3 years have passed since last update.


フォントカラー変更


css


/* 各ベンダープレフィックスが取れた標準版!!(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
color: red; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
color: red; }

/* Firefox 18- */
:-moz-placeholder {
color: red; opacity: 1; }

/* Firefox 19+ */
::-moz-placeholder {
color: red; opacity: 1; }

/* IE 10+ */
:-ms-input-placeholder {
color: red; }



スタイルも付けれます


css

::-webkit-input-placeholder {

color: red;
background-color: #ddd;
font-size: 20px;
font-style: italic;
font-weight: 100;
line-height: 1;
letter-spacing: 0.2em;
border: 2px solid #000;
box-shadow: 0 1px 5px blue;
border-radius: 50px;
}


フォントカラーのsass mixin


scss

/*

* Mixin for placeholder
* @include placeholderColor(#00ff00);
*/

@mixin placeholderColor($color) {
&:placeholder-shown {
color: $color;
}
&::-webkit-input-placeholder {
color:$color;
}
&:-moz-placeholder {
color:$color;
opacity: 1;
}
&::-moz-placeholder {
color:$color;
opacity: 1;
}
&:-ms-input-placeholder {
color:$color;
}
}


使い方


scss

@include placeholderColor(#00ff00);



スタイル指定できるsass mixin


scss

@mixin placeholder {

&:placeholder-shown {
@content;
}
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder {
opacity: 1;
@content;
}
&::-moz-placeholder {
opacity: 1;
@content;
}
&:-ms-input-placeholder {
@content;
}
}


使い方


scss

@include placeholder {

// ここに書く...
color: #00ff00;
font-size: 20px;
line-height: 1;
}


IE9 ~ 6でもplaceholder属性を使えるようにする方法

HTML5 の placeholder 属性を jQuery でクロスブラウザに

HTML5 Placeholder jQuery Plugin@github


参考

Stackoverflow | Change an input's HTML5 placeholder color with CSS

Internet Explorer Dev Center

MDN Docs

CSS-Tricks