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 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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三元运算符的结合性介绍
2012/01/10 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
ExpressJS入门实例
2015/01/14 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
简单谈谈python中的语句和语法
2017/08/10 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
搞笑的获奖感言
2014/08/16 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python