html5中input框中颜色怎么写,HTML5中input的placeholder颜色设置及兼容性解决方案_蓝戒的博客...

1、placeholder是什么？

placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点(或输入内容)时，提示文字消失。

例如下文本框文字效果

2、placeholder的浏览器兼容性和在不同浏览器下的表现

由于placeholder是个新增属性，目前只有少数浏览器支持，如何让更多的浏览器支持它呢？

目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持

默认情况下，placeholder的文字是灰色，输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么，如何修改placeholder的色值呢？

如果直接写input{color:#ddd;}，可以看到，ie10和ff下，placeholder文字和输入文字都变成了相同颜色#ddd，

默认颜色调整css解决方案：

/* all */

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

input:-moz-placeholder { color:#f00; }

到这里还不能完全解决placeholder的多浏览器支持，还需要配合使用js处理

placeholder的浏览器兼容js解决方案：

var JPlaceHolder = {

//检测

_check : function(){

return 'placeholder' in document.createElement('input');

},

//初始化

init : function(){

if(!this._check()){

this.fix();

}

},

//修复

fix : function(){

jQuery(':input[placeholder]').each(function(index, element) {

var self = $(this), txt = self.attr('placeholder');

self.wrap($('

var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');

var holder = $('').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());

self.focusin(function(e) {

holder.hide();

}).focusout(function(e) {

if(!self.val()){

holder.show();

}

});

holder.click(function(e) {

holder.hide();

self.focus();

});

});

}

};

//执行

jQuery(function(){

JPlaceHolder.init();

});

页面中placeholder使用示例：

*用户名：