在做搜索框的时候无意间发现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 { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置的更多相关文章
-
设计input搜索框提示文字点击消失的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
HTML 5 <;input>; placeholder 属性 实现搜索框提示文字点击输入后消失
H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...
-
html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
-
html5配合css3实现带提示文字的输入框(摆脱js)
来源:互联网 作者:佚名 时间:03-08 11:41:53 [大 中 小] webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框 ...
-
Jquery实现搜索框提示功能
博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...
-
js借助JSONP实现百度搜索框提示效果
主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...
-
html5 模糊匹配搜索框
使用bootstrap3-typeahead.js 文件在这里 引用: <script type="text/javascript" src="@Url.Conte ...
-
js 鼠标点击文本框 提示文字消失
onfocus="if(this.value==defaultValue) {this.value='';}" onblur="if(!value) {value=def ...
-
ECSHOP搜索框文字点击消失
<input name="keywords" type="text" id="keyword" value="黄山金银币&q ...
随机推荐
-
垃圾回收机制GC知识再总结兼谈如何用好GC
一.为什么需要GC 应用程序对资源操作,通常简单分为以下几个步骤: 1.为对应的资源分配内存 2.初始化内存 3.使用资源 4.清理资源 5.释放内存 应用程序对资源(内存使用)管理的方式,常见的一般 ...
-
C# Gabbage Collecting System
* 这个程序非常巧妙的探测了一下垃圾回收机制,发现如下结论: * 当内存紧急时,才会启动垃圾回收GC.Collect() * 从此程序的运行上来看,delete是连续出现的,这体现了垃圾回收的强度. ...
-
15个专业版响应式WordPress主题
当你准备创建一个新的网站,你会发现有很多的WordPress主题供你选择,它们强大而且合适.虽然大量的第三方插件可以解决脚本的问题,但这次我们要向你介绍一些完全不同于以往的主题,它们都是专业开发者开发 ...
-
Unity Networking API文档翻译(一):Networking概述
写在翻译前的话: 我使用过Photon,研究过Ulink这些Unity提供的多人在线游戏服务器组件,这些商业组件虽然很好很强大.但是对于一个独立开发者来说,4000多软妹币还是点多.总想找一 ...
-
单元测试(junit使用)
1.测试的对象是一个类中的方法. 2.导入jar包. 3.单元测试方法时候,测试方法命名规则为 public void 方法名(){},注意:测试类不能命名为public class Test{},T ...
-
mac下常用软件整理
1.非常好用的压缩管理软件(免费版):RAR Extrator Free 解压的中文不会产生乱码: 2.记笔记用的:有道笔记.Evernote 3.SVN管理软件:ConerStone 4.非常给力 ...
-
1020. Tree Traversals
Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...
-
merge和rebase的区别
前言 我从用git就一直用rebase,但是新的公司需要用merge命令,我不是很明白,所以查了一些资料,总结了下面的内容,如果有什么不妥的地方,还望指正,我一定虚心学习. merge和rebase ...
-
rabbitmq作为mqtt服务器实现websocket消息推送给浏览器
rabbitmq的RabbitMQ Web MQTT插件可以用来支持将rabbitmq作为MQTT协议的服务器,而websocket支持mqtt协议通信实现消息推送.因为我们目前使用rabbitmq, ...
-
JAVA核心技术I---JAVA基础知识(数据结构基础)
一:数组 (一)基本内容是与C一致的 (二)数组定义和初始化 (1)声明 int a[]; //a没有new操作,没有被分配内存,为null int[] b; //b没有new操作,没有被分配内存,为 ...