分享好友 教程首页 教程搜索 频道列表

轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

2018-12-10 19:2118950
+关注28
核心提示:在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字...

在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能。。。

实例代码


<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="我是提示文字 在此输入文本我会消失" />
  <input type="submit" />
</form>



根据浏览器的不同,效果也不同。 

有些会在鼠标focus文本框时,文字直接消失。 

有些则会在输入文本时消失。

占位文本颜色设置如下

::-webkit-input-placeholder {  
color: #999; 
} 
:-moz-placeholder {  
color: #999; 
} 
::-moz-placeholder {  
color: #999; 
} 
:-ms-input-placeholder {  
color: #999; 
} 


整理员:xiaohei
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
最新其他更多

select2插件之api参数的文档

    具体参数可以参考一下:参数类型描述Width字符串控制宽度样式属性的Select2容器divminimumInputLengthint最小数量的字符maximumInputLengthint最大数量的字符minimumResultsForSearchInt最小数量的结果maximumSelect

小黑 JavaScript教程 52024-09-11

Sortable.js:功能强大的JavaScript拖拽库,不依赖JS

    JS库介绍Sortable.js一个功能强大的JavaScript 拖拽库!!!用于在网页上创建可拖放和可排序的元素。它提供了简单而强大的 API,使开发人员能够轻松地实现拖放功能,并允许用户通过拖放来重新排序列表、网格和其他元

网络转载 JavaScript教程2024-04-28

HTML5+CSS3+JS实例之带标题描述的圆角图片手风琴效果

    圆角图片手风琴效果

小黑 HTML教程2024-03-26

Node.js 的安装(电脑win7支持的版本)

网络转载 工具相关2024-03-12

js怎么获取input的值

    js获取input值的方法:首先给from命名;然后在javascript的地方用form的名字来调用form表单里input元素的value属性;接着把值赋给“a”;最后用js的“alert()”方法打印出来即可。

小黑 JavaScript教程2024-03-12

下一篇
我来说两句
抢沙发