HTML5 input placeholder 颜色修改示例
作者：佚名
字体：[ ] 来源：互联网 时间：05-30 16:54:51
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识，需要的朋友可以参考下
Chrome支持input=[type=text]占位文本属性，但下列CSS样式却不起作用： CSS 代码如下: input[placeholder], [placeholder], *[placeholder] { color:red ! } 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; } ：input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。 代码如下: *::-webkit-input-placeholder { color: } *:-moz-placeholder { color: } *:-ms-input-placeholder { /* IE10+ */ color: } James Donnelly：在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法： 代码如下: ::-webkit-input-placeholder { color: text-overflow: } :-moz-placeholder { color: #acacac ! text-overflow: } ::-moz-placeholder { color: #acacac ! text-overflow: } /* for the future */ :-ms-input-placeholder { color: #acacac ! text-overflow: } 还有一种好办法: 代码如下: 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: 25 /* etc */ } user1729061：不用CSS和占位文本，同样能得到相同效果。 代码如下: input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;"/&
大家感兴趣的内容
12345678910
最近更新的内容Pages: 1/2
主题 : 改变textfield的placeholder的字体颜色
级别: 侠客
UID: 279612
可可豆: 358 CB
威望: 438 点
在线时间: 659(时)
发自: Web Page
改变textfield的placeholder的字体颜色&&&
[contactTF setValue:[UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1] forKeyPath:@"_placeholderLabel.textColor"];为什么没有效果，难道一定要自定义吗？
级别: 侠客
UID: 279612
可可豆: 358 CB
威望: 438 点
在线时间: 659(时)
发自: Web Page
级别: 新手上路
可可豆: 157 CB
威望: 111 点
在线时间: 356(时)
发自: Web Page
设置textfield 的 tintcolor。
级别: 侠客
UID: 279612
可可豆: 358 CB
威望: 438 点
在线时间: 659(时)
发自: Web Page
已经解决了，把placehold的值写在这句上面就行
级别: 新手上路
UID: 118403
可可豆: 347 CB
威望: 187 点
在线时间: 61(时)
发自: Web Page
[contactTF&setValue:[UIColor&colorWithRed:0.2&green:0.2&blue:0.2&alpha:1]&forKeyPath:@&_placeholderLabel.textColor&]
这种语句除非有必要，否则尽量不要这么写，容易引起版本兼容问题。
显示的property去设置，这样下一个iOS版本若不兼容了，自动会有warning。
级别: 侠客
UID: 279612
可可豆: 358 CB
威望: 438 点
在线时间: 659(时)
发自: Web Page
级别: 侠客
UID: 508418
可可豆: 477 CB
威望: 363 点
在线时间: 162(时)
发自: Web Page
回 4楼(amadiasdong) 的帖子
textfiled的placeholder字体颜色我这样修改也没有反应，要怎么弄呢？
级别: 光明使者
UID: 96533
发帖: 7979
可可豆: 8314 CB
威望: 8121 点
在线时间: 274(时)
发自: Web Page
&&用NSAttributedString&&&& *attributedPlaceholder
爱好＋坚持
级别: 新手上路
UID: 512271
可可豆: 142 CB
威望: 132 点
在线时间: 68(时)
发自: Web Page
如何设置textfield提示符的字体大小以及字体颜色
级别: 新手上路
UID: 512271
可可豆: 142 CB
威望: 132 点
在线时间: 68(时)
发自: Web Page
回 8楼(王依平) 的帖子
帮忙写个具体的
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版&& &input id=&Text1& type=&text& placeholder=&请输入你要填的内容&/&
因为每个浏览器的兼容性都不相同，所以针对每个浏览器都要做单独的设定
&&& ::-webkit-input-placeholder {/*Chrome/Safari*/
&&& color:#
&&& : :-moz-placeholder {/*Firefox*/
&&& color:#
&&& 　: :-ms-input-placeholder {/*IE*/
&&&&&& color:#
重点：单冒号（：）用于CSS3伪类，双冒号（：：）用于CSS3伪元素
&&&&&&&&&&&&&&&&&& CSS伪类：css伪类用于向某些选择器添加特殊的效果
&&&&&&&&&&&&&&&&&& CSS伪元素：css伪元素用于向某些选择器设置特殊的效果
伪元素由双冒号和伪元素名称组成双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，&如:first-line,:first-letter,:before,:after等等。因此对于css2之前已经有的伪元素两种写法的作用是一样的，但是为了兼容IE浏览器还是使用单冒号的写法。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2974次
排名：千里之外
原创：12篇
(3)(2)(2)(3)(2)后使用快捷导航没有帐号？
只需一步，快速开始
查看: 5043|回复: 3
请问opera下input设置了placeholder，怎么修改placeholder文字的字体颜色
UID340021在线时间 小时积分2115帖子离线17332 天注册时间
银牌会员, 积分 2115, 距离下一级还需 885 积分
&input type=&search& placeholder=&输入…& /&复制代码
opera下求改变&输入…& 颜色的方法
UID494693在线时间 小时积分1079帖子离线17332 天注册时间
银牌会员, 积分 1079, 距离下一级还需 1921 积分
用&button&&/button&写 才用CSS设置color
UID494384在线时间 小时积分8060帖子离线17332 天注册时间
遗憾的是Opera目前还没找到解决方案：
By brucelawson&&Friday, 17. December :22
Toscho - you can't style the placeholder at the moment. We're looking at how that currently there is nothing in CSS that gives a hook to style.
SailorMax - the calendar is only for inputting dates. And validation only takes place at submit time. The standard is silent about User Interface.
webkit下还是挺好的
[[i] 本帖最后由 baihe107 于
15:27 编辑 ]
UID340021在线时间 小时积分2115帖子离线17332 天注册时间
银牌会员, 积分 2115, 距离下一级还需 885 积分
回复 3# baihe107
3q，虽然我已经知道在opera11的版本不支持自定义placeholder样式了
Powered byHTML5 Placeholder实现input背景文字提示效果 | HTML5资源教程