微学网

热门关键词:   as  thinkphp  ecshop  商务通  xxx  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

HTML5 input placeholder 颜色修改示例

发布时间:2017-05-13 来源:未知 点击:
点评:这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
CSS rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
input[placeholder], [placeholder], *[placeholder] { rs5HTML5中文学习网 - HTML5先行者学习网
color:red !important; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
HTML input语句 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
<input type="text" placeholder="Value" /> rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
运行结果值还是灰色,Color:red没有作用。有什么方法可以修改占位文本的颜色吗?我在浏览器里安装了jQuery占位文本插件,但仍然无用。(!important只有IE7和firefox能识别) rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
回答: rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。 rs5HTML5中文学习网 - HTML5先行者学习网
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
::-webkit-input-placeholder rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
Mozilla Firefox 4-18使用伪类 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
:-moz-placeholder rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
Mozilla Firefox 19+ 使用伪元素 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
::-moz-placeholder rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
IE10使用伪类 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
:-ms-input-placeholder rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。 rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
CSS选择器 rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
::-webkit-input-placeholder { /* WebKit browsers */ rs5HTML5中文学习网 - HTML5先行者学习网
color: #999; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ rs5HTML5中文学习网 - HTML5先行者学习网
color: #999; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
::-moz-placeholder { /* Mozilla Firefox 19+ */ rs5HTML5中文学习网 - HTML5先行者学习网
color: #999; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
:-ms-input-placeholder { /* Internet Explorer 10+ */ rs5HTML5中文学习网 - HTML5先行者学习网
color: #999; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
Matt:textareas(文本框可拉伸)风格样式的代码,如下: rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #636363; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
input:-moz-placeholder, textarea:-moz-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #636363; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
brillout.com:input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定,不要打包整体处理,因为其中一个出问题,其他的都会失效。 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
*::-webkit-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: red; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
*:-moz-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: red; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
*:-ms-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
/* IE10+ */ rs5HTML5中文学习网 - HTML5先行者学习网
color: red; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
James Donnelly:在Firefox和IE里,正常input文本颜色覆盖占位符颜色的方法: rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
::-webkit-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: red; text-overflow: ellipsis; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
:-moz-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #acacac !important; text-overflow: ellipsis; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
::-moz-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #acacac !important; text-overflow: ellipsis; rs5HTML5中文学习网 - HTML5先行者学习网
} /* for the future */ rs5HTML5中文学习网 - HTML5先行者学习网
:-ms-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #acacac !important; text-overflow: ellipsis; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
还有一种好办法: rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #666; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
input:-moz-placeholder, textarea:-moz-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #666; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
input::-moz-placeholder, textarea::-moz-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #666; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
input:-ms-input-placeholder, textarea:-ms-input-placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #666; rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
最后一种是从网上找的: rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
$('[placeholder]').focus(function() { rs5HTML5中文学习网 - HTML5先行者学习网
var input = $(this); rs5HTML5中文学习网 - HTML5先行者学习网
if (input.val() == input.attr('placeholder')) { rs5HTML5中文学习网 - HTML5先行者学习网
input.val(''); rs5HTML5中文学习网 - HTML5先行者学习网
input.removeClass('placeholder'); rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
}).blur(function() { rs5HTML5中文学习网 - HTML5先行者学习网
var input = $(this); rs5HTML5中文学习网 - HTML5先行者学习网
if (input.val() == '' || input.val() == input.attr('placeholder')) { rs5HTML5中文学习网 - HTML5先行者学习网
input.addClass('placeholder'); rs5HTML5中文学习网 - HTML5先行者学习网
input.val(input.attr('placeholder')); rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
}).blur(); rs5HTML5中文学习网 - HTML5先行者学习网
$('[placeholder]').parents('form').submit(function() { rs5HTML5中文学习网 - HTML5先行者学习网
$(this).find('[placeholder]').each(function() { rs5HTML5中文学习网 - HTML5先行者学习网
var input = $(this); rs5HTML5中文学习网 - HTML5先行者学习网
if (input.val() == input.attr('placeholder')) { rs5HTML5中文学习网 - HTML5先行者学习网
input.val(''); rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
}) rs5HTML5中文学习网 - HTML5先行者学习网
}); rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
这个代码调用的规则是,先加载Javascript再用CSS修改占位符属性。 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
form .placeholder { rs5HTML5中文学习网 - HTML5先行者学习网
color: #222; rs5HTML5中文学习网 - HTML5先行者学习网
font-size: 25px; rs5HTML5中文学习网 - HTML5先行者学习网
/* etc */ rs5HTML5中文学习网 - HTML5先行者学习网
} rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网
user1729061:不用CSS和占位文本,同样能得到相同效果。 rs5HTML5中文学习网 - HTML5先行者学习网

代码如下: rs5HTML5中文学习网 - HTML5先行者学习网
input type="text" value="placeholder text" onfocus="this.style.color='#000'; rs5HTML5中文学习网 - HTML5先行者学习网
this.value='';" style="color: #f00;"/> rs5HTML5中文学习网 - HTML5先行者学习网
rs5HTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"HTML5 input placeholder 颜色修改示例"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6761.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟教程,提供各类程序编程入门,技巧