HTML5 input placeholder 颜色修改示例


Posted in HTML / CSS onMay 30, 2014

Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用:

CSS

复制代码
代码如下:

input[placeholder], [placeholder], *[placeholder] {
color:red !important;
}

HTML input语句
复制代码
代码如下:

<input type="text" placeholder="Value" />

运行结果值还是灰色,Color:red没有作用。有什么方法可以修改占位文本的颜色吗?我在浏览器里安装了jQuery占位文本插件,但仍然无用。(!important只有IE7和firefox能识别)

回答:

toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素

复制代码
代码如下:

::-webkit-input-placeholder

Mozilla Firefox 4-18使用伪类
复制代码
代码如下:

:-moz-placeholder

Mozilla Firefox 19+ 使用伪元素
复制代码
代码如下:

::-moz-placeholder

IE10使用伪类
复制代码
代码如下:

:-ms-input-placeholder

IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。

CSS选择器

因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。

复制代码
代码如下:

::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}

Matt:textareas(文本框可拉伸)风格样式的代码,如下:
复制代码
代码如下:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}

brillout.com:input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定,不要打包整体处理,因为其中一个出问题,其他的都会失效。
复制代码
代码如下:

*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
/* IE10+ */
color: red;
}

James Donnelly:在Firefox和IE里,正常input文本颜色覆盖占位符颜色的方法:
复制代码
代码如下:

::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
} /* for the future */
:-ms-input-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}

还有一种好办法:
复制代码
代码如下:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #666;
}

最后一种是从网上找的:
复制代码
代码如下:

$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

这个代码调用的规则是,先加载Javascript再用CSS修改占位符属性。
复制代码
代码如下:

form .placeholder {
color: #222;
font-size: 25px;
/* etc */
}

user1729061:不用CSS和占位文本,同样能得到相同效果。
复制代码
代码如下:

input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;"/>
HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 #HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 #HTML / CSS
html5设计原理(推荐收藏)
May 17 #HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 #HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 #HTML / CSS
分享全球十款超强HTML5开发工具
May 14 #HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 #HTML / CSS
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
vue实现图片上传功能
2020/05/28 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
使用TensorFlow实现SVM
2018/09/06 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
任命书怎么写
2014/06/04 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
英语辞职信怎么写
2015/02/28 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书