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

####フォントカラー変更

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