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

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

2018-12-10 19:2119220
+关注29
核心提示:在做搜索框的时候无意间发现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
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
最新其他更多

表格列显示隐藏示例

    在table里 ,我想做一个页头 可以设置显示和隐藏的勾选 ,我的意思是 勾选的才对应显示 ,但是我希望刷新页面后,也保持勾选缓存,并且需要比如 :我勾选 不显示集 名称,对应的 名称 整列就不显示

小黑 JavaScript教程2024-10-30

使用translate将整个页面自动翻译的方案,注意有次数限制

    两行js实现html全自动翻译。无需改动页面、无语言配置文件、无API Key、对SEO友好!

网络 JavaScript教程 12024-10-26

DESTOON模板中引入layui组件库使用lay-tips提示的方法

    在模板开发中,如果我们使用了layui组件库,现在需要优化tips鼠标提示词显示就简单了很多,首先需要引入layui.css和layui.js

小黑 JavaScript教程2024-10-22

Sublime Text3的列对齐功能

    Sublime Text 2和3的插件,添加了快捷方式,可以轻松地使光标周围的文本垂直对齐。 只需按Cmd+\ (Mac)或Ctrl+\ (Windows / Linux),您周围的代码就会自动对齐。

小黑 工具相关2024-10-22

select2插件之api参数的文档

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

小黑 JavaScript教程 52024-09-11

下一篇
我来说两句
抢沙发