Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

为placeholder添加更好的效果

  placeholder提供了文本框为空时的文字效果,它的使用早已泛滥。但placeholder的默认样式却很难看,控件获取焦点后placeholder的文字的颜色没有改变。用户更希望在获取焦点后让这些用于提示的文字颜色变得更浅,与正常情况产生一个对比。
  以前自己模拟placeholder的效果时就实现了这个颜色变化,代码很繁杂但是效果比placeholder的默认效果好。其实placeholder自己也支持这样的效果,只需要在CSS中使用一个伪类就可以实现,不需要其它程序代码。
<!DOCTYPE html>
<style>
/*控件样式*/
input {
  border:1px solid #CCC;padding:2px;
  outline:none;font-family:微软雅黑;
}
/*默认状态颜色*/
input::-webkit-input-placeholder {color:#AAA;}
input::-moz-placeholder {color:#AAA;}
/*获取焦点后颜色变淡*/
input:focus::-webkit-input-placeholder {color:#DDD;}
input:focus::-moz-placeholder {color:#DDD;}
</style>
<input placeholder="请输入文字" />

  Chrome和Firefox都可以支持,但是需要加浏览器前缀,而且注意它们使用的伪类名不同。IE的设计就非常操蛋了,只要控件获取焦点就直接清除掉placeholder的提示文字,不等到用户输入,即时支持修改placeholder的默认颜色作用也不大。如果要兼容地实现这个效果只能针对不支持的浏览器模拟了。
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^