html5的placeholder属性

placeholder的css兼容性写法

::-webkit-input-placeholder {
    color: #fff;
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {
    color: #fff;
}
::placeholder {
    color: #fff;
}

尤其要注意不同前缀的写法也不同。

在指定的位置修改placeholder样式

#id::-webkit-input-placeholder {
    color: #fff;
}
#id::-moz-placeholder {
    color: #fff;
}
#id:-ms-input-placeholder {
    color: #fff;
}
#id::placeholder {
    color: #fff;
}

当然，如果你使用了autoprefix这一类的插件，这些写法就不用特别注意了，插件会自动完成css兼容。

使用js来检测浏览器是否支持placeholder属性

function isSupportPlaceholder() {
    var dom = document.createElement('input');
    return ('placeholder' in dom);
}