html5 CSS设置输入框默认文字颜色（webkit-input-placeholder等） - 为程序员服务
为程序员服务
CSS设置输入框默认文字颜色（webkit-input-placeholder等）
在html5中input，textarea等元素新添加了placeholder的属性，我们可以通过css设置placeholder的样式，对于ie，firefox，以及webkit内核的浏览器需要使用不同的样式写法。
如下测试代码：
&!doctype html&
&style type=&text/css&&
#myInput::-webkit-input-placeholder {
#myInput:-moz-placeholder {
#myInput:-ms-input-placeholder {
id='myInput' placeholder='hello'/& &br&
&textarea id='myInput' placeholder='hello'&&/textarea&
您可能的代码
相关聚客文章
相关专栏文章查看: 35160|回复: 0
带提示的input输入框类似html5的 placeholder
Html5带来了 placeholder&input id=&t1& type=&text& placeholder=&请输入文字& /&复制代码
轻松实现 简单不...但是扩展性比较差 而且ie等浏览器支持不是很完善 而且各主流浏览器支持效果不是很统一
所以还是jquery/js 比较实用...简单实现起来也不是很复杂 并且统一性比较强大
38c88d3e-29f8-318b-8d42-bcc.png (22.69 KB, 下载次数: 45)
20:54 上传
html
& & &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&&
& & &html xmlns=&http://www.w3.org/1999/xhtml&&&&
& & &head&&&
& & &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&&
& & &title&文本框输入文字后提示语消失特效 &/title&&&
& & &script type=&text/javascript& src=&/ajax/libs/jquery/1/jquery.js&&&/script&&&
& & &script type=&text/javascript&&&&
& &&&$(document).ready(function(){&&
& && &
& && & $(&#focus .input_txt&).each(function(){&&
& && && &var thisVal=$(this).val();&&
& && && &//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示&&
& && && &if(thisVal!=&&){&&
& && && &&&$(this).siblings(&span&).hide();&&
& && && & }else{&&
& && && &&&$(this).siblings(&span&).show();&&
& && && & }&&
& && && &//聚焦型输入框验证& &
& && && &$(this).focus(function(){&&
& && && &&&$(this).siblings(&span&).hide();&&
& && && & }).blur(function(){&&
& && && && &var val=$(this).val();&&
& && && && &if(val!=&&){&&
& && && && & $(this).siblings(&span&).hide();&&
& && && && &}else{&&
& && && && & $(this).siblings(&span&).show();&&
& && && && &}& &
& && && & });&&
& && &&&})&&
& && &&&$(&#keydown .input_txt&).each(function(){&&
& && && &var thisVal=$(this).val();&&
& && && &//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示&&
& && && &if(thisVal!=&&){&&
& && && &&&$(this).siblings(&span&).hide();&&
& && && & }else{&&
& && && &&&$(this).siblings(&span&).show();&&
& && && & }&&
& && && & $(this).keyup(function(){&&
& && && &&&var val=$(this).val();&&
& && && &&&$(this).siblings(&span&).hide();&&
& && && & }).blur(function(){&&
& && && && &var val=$(this).val();&&
& && && && &if(val!=&&){&&
& && && && & $(this).siblings(&span&).hide();&&
& && && && &}else{&&
& && && && & $(this).siblings(&span&).show();&&
& && && && &}&&
& && && &&&})&&
& && && &})& &
& && &})&&
& & &/script&&&
& & &style type=&text/css&&&&
& &&&form{width:400margin:10border:solid 1px #E0DEDE;background:#FCF9EF;padding:30box-shadow:0 1px 10px rgba(0,0,0,0.1)}&&
& &&&label{display:height:40position:margin:20px 0;}&&
& &&&span{position:float:line-height:40left:10color:#BCBCBC;cursor:}&&
& &&&.input_txt{width:398border:solid 1px #box-shadow:0 1px 10px rgba(0,0,0,0.1)height:38text-indent:10}&&
& &&&.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}&&
& &&&.border_radius{border-radius:5color:#B00000;}&&
& &&&h2{font-family:&微软雅黑&;text-shadow:1px 1px 3px #}&&
& & &/style&&&
& & &/head&&&
& && &
& & &body&&&
& &&&&form class=&border_radius& id=&focus&&&&
& && && && &&h2&聚焦型提示语消失&/h2&&&
& && && && &&label&&span&花瓣注册邮箱&/span&&input type=&text& class=&input_txt border_radius&&&/&&/label&&&
& && && && &&label&&span&密码&/span&&input type=&text& class=&input_txt border_radius& /&&/label&&&
& && &&&&/form&&&
& &&&&form class=&border_radius& id=&keydown&&&&
& && && &&h2&输入型提示语消失&/h2&&&
& && && &&label&&span&花瓣注册邮箱&/span&&input type=&text& class=&input_txt border_radius&&&/&&/label&&&
& && && && &&label&&span&密码&/span&&input type=&text& class=&input_txt border_radius& /&&/label&&&
& && &&&&/form&&&
& && &
& & &p&&script type=&text/javascript& src=&/goto/js-preview-728x90.js&&&/script&&/p&&&
& & &/body&&&
& & &/html&&&复制代码
上一篇：下一篇：主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
傻丫头和高科技产物小心翼翼的初恋
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮placeholder英文意思是占位符，它是HTML5的属性，作用是给input描述输入字段预期值的提示信息，当然你不能指望IE也支持它，IE6~IE9都不支持HTML5 placeholder（后面会提供方法支持）。先看看placeholder在Chrome和Firefox区别：&input type="text" placeholder="" size="26" /&
不过没事，你可以用css覆盖一次，还可以修改默认字体颜色等：&style&
input:-moz-placeholder { color: #999; }
::-webkit-input-placeholder { color:red }
最重要的来了，jQuery Placeholder插件让IE支持placeholder：&script src="jquery1.7.1-min.js"&&/script&
&script src="jquery.placeholder.js"&&/script&
$(function() {
$('input, textarea').placeholder();
&input type="url" name="url" placeholder="e.g.
&textarea name="message" placeholder="你的信息"&&/textarea&如何修改input中的placeholder中的默认样式
html5为input添加了原生的占位符属性placeholder，高级浏览器都支持这个属性，例如：
&input type=&text& placeholder=&我爱北京天安门& value=& &&
默认的placeholder字体颜色是呈浅灰色，如果想改变这个默认颜色，解决方案如下：
:-moz-placeholder {
& & color: #f00;&&
::-moz-placeholder {
& & color: #f00;
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
& & color: #f00;
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
& & color: #f00;
14 总笔记数
4.1万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：}