html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程

这篇文章主要为大家详细介绍了HTML5网页placeholder美化input背景提示文字教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

今天要给大家介绍的是HTML5网页placeholder美化input背景提示文字。我们大家都知道CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。所以下面下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。如果我们想实现如下的显示效果CSS代码该如何书写呢？

不兜圈子了，下面直接跟随织梦361上代码。

CSS代码

在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同，如下。/* 通用 */

::-webkit-input-placeholder { color:#f00; }

::-moz-placeholder { color:#f00; } /* firefox 19+ */

:-ms-input-placeholder { color:#f00; } /* ie */

input:-moz-placeholder { color:#f00; }

/* webkit专用 */

#field2::-webkit-input-placeholder { color:#00f; }

#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* mozilla专用 */

#field2::-moz-placeholder { color:#00f; }

#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

虽然本质上只是一句代码，但为了实现范围最广的浏览器支持，加上了各自的浏览器引擎前缀(Vendor Prefix)，一下子变成了10几行代码，哎，这也是没有办法，有了百家浏览器争鸣，就会出现这样的情形。

一些基本的CSS样式你都可以使用在placeholder上——颜色，字体，字体样式等。你可以还可以创造更复杂的样式，比如用GIF动画。

实例演示效果就是上面的图片效果，用了四种美化效果，我使用了autofocus将光标放在了第一个输入框里，但可以在其它输入框里也输入信息。

对于input输入框的背景提示信息(placeholder)的美化虽然只是对网站应用的小小点缀，但正是这样细节上的小差别将你的网站和别人的网站区别开来。IE10也支持了placeholder属性，所以，这是一个可以大范围只是的CSS技巧。

扩展阅读：

感谢打赏，我们会为大家提供更多优质资源！

html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程相关推荐

html5背景文字,HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...
ArcGIS API for JavaScript 3.24 文字标注的添加和带背景的文字添加
说明:本人是一个gis小白,由于网上的资料过于专业,当时学习的时候经常看不懂,于是写了一些简单的关于ArcGIS Api for javaScript分享,若该分享中出现错误,希望大家指出,若能帮助到 ...
html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
本文作者html5tricks,转载请注明出处这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但in ...
HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
用html制作个人站点,【制作个人网站】如何在网上制作自己的网页?如何用html5制作个人主页?制作个人网页设计思路是怎样的?...
[制作个人网站]如何在网上制作自己的网页?如何用html5制作个人主页?制作个人网页设计思路是怎样的?下面就和小编一起来看看吧! 如何在网上制作自己的网页? 网站设计的八个步骤现在看到的工具越来越多, ...
【百套源码】HTML5期末大作业 - 各类网页作业源码合集
文章目录持续更新文章记录 1️⃣ 个人介绍类相关源码 1.1 html实现个人简历 1.2 科技风个人简历 1.3 网站风个人简历 1.4 多种风格个人主页模板 1.5 html好看的个人简历明星版 ...
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的表白网页吧尽管没有深情的告白, ...
HTML5与CSS3实现动态网页（笔记）
打开新页 HTML5与CSS3实现动态网页(学习笔记) 结构标签 article:标记定义一篇文章 header:标记定义一个页面后者一个区域的头部 nav:标记定义导航链接 section:标记定义 ...

html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程

html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程相关推荐

最新文章

热门文章