Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。

兼容多个浏览器的方法:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #eee;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #eee;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #eee;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #eee;
}

::placeholder { /* 大部分现代浏览器支持*/
   color:    #eee;
}

其中在firefox需要加上opacity:1

版权声明:著作权归作者所有。

相关推荐

html给文本输入框添加自定义的清除按钮

使用HTML 5,如果对清除按钮的样式不介意的话,可以使用search类型的输入框,它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮,则需要自己实现,这里使用jquery给出一个实现的方案:<!DOCTYPE h

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

Html5使用localStorage存储对象数据

Html5可使用localStorage存储数据,其方法为storage.setItem(keyName, keyValue); 其中:keyName:键,字符串类型keyValue:值,字符串类型关于setItem,可以参考:Storage.setItem()。如果需要存储对象数据,那么需要把对象数据使用JSON.stringify转换为字符串。localStorage.setItem