之前在介绍HTML5的placeholder属性时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看。
CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。

其实只是一句代码，但为了实现范围最广的浏览器支持，加上了各自的浏览器引擎前缀(Vendor Prefix)，一下子变成了10几行代码，希望这种情况会尽快的过去。
一些基本的CSS样式你都可以使用在placeholder上——颜色，字体，字体样式等。你可以还可以创造更复杂的样式，比如用GIF动画。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <style type="text/css">

            ::-webkit-input-placeholder {color:#7ad3fb; font-family: "楷体";}/*WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 */

            :-moz-placeholder  {color:#7ad3fb; font-family: "楷体";}/*Mozilla Firefox 4-18使用伪类 */

            ::-moz-placeholder  {color:#7ad3fb; font-family: "楷体";}/*Mozilla Firefox 19使用伪类 */

            :-ms-input-placeholder {color:#7ad3fb; font-family: "楷体";}/*IE10使用伪类 */

        </style>

    </head>

    <body>

        <input type="text"  placeholder="请输入数字" />

    </body>

</html>

参考：http://www.webhek.com/html5-placeholder-css/

placeholder的美化的更多相关文章

  1. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  2. Css 应用一

    Placeholder使用 CSS3里有相应的通用的对Placeholder提示信息美化的方法.你可以设置提示信息文字的颜色,透明度,背景色等. 为了最大化的兼容所有浏览器,给CSS里的placeho ...

  3. 你所不知道的CSS

    1.用FONT-SIZE:0来清除间距 inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙.如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来 ...

  4. HTML5在input背景提示文本(placeholder)的CSS美化

    本文转自http://www.webhek.com/html5-placeholder-css/ 在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同.但相信以后会统一. /* 通用 */ ...

  5. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  7. 实现UITextView的placeholder

    我们知道在iOS开发时,控件UITextField有个placeholder属性,UITextField和UITextView使用方法基本类似,有两个小区别:1.UITextField单行输入,而UI ...

  8. 我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！

    背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...

  9. HTML,JAVASCRIPT代码美化demo

    看见别人的博客里面的源码展示十分漂亮,一时兴起,就自己做了个. 当然,网上已经有别人做好的非常完善的codemirror.highlight.prettify.而我在写自己的这个小demo之前呢,也没 ...

随机推荐

  1. nodejs,http，get,post,请求

    本文源于实践及其部分网络搜索: 其实大部分,官方都有介绍... 官方参考链接:https://nodejs.org/api/http.html var http = require('http'); ...

  2. Asio C++ Library，libuv - Cross-platform asynchronous I/O

    http://think-async.com/ http://libuv.org/ https://github.com/libuv/libuv

  3. svg动画学习

    首先我们定义一块画布,然后在上面画一个圆形. 他看起来应该是这个样子的:(每一个实例我都会附加图片以及demo链接,方便直观的理解与源代码的查看,查看的时候请使用标准浏览器) 点击查看Demo 现在我 ...

  4. Objective-C运行时态消息传递－－拼接方法名

    做IOS开发的人都知道,Objective-C语言中方法的调用是运行时采取绑定的,在编译过程中只声明该方法的存在. 那么我们来简单说下在运行时,类的消息传递. 在运行时,每个方法如［self meth ...

  5. zabbix 安装配置以及漏洞检测脚本

    最近zabbix爆出sql注入漏洞.之前一直没装过.就想着来安装一次.我在centos配置玩玩,记录一下:1.安装LAMP yum -y install httpd  mysql  mysql-ser ...

  6. CentOS 6.5 安装MySQL5.7 RPM

    一.新特性 MySQL 5.7可谓是一个令人激动的里程碑,在默认了InnoDB引擎的基础上,新增了ssl.json.虚拟列等新特性.相对于postgreSQL和MariaDB而言,MySQL5.7做了 ...

  7. LeetCode 476. Number Complement

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  8. line-height 行高

    line-height 行高指一行文字的高度,具体来说是指两行文子间基线间的距离      line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和 ...

  9. [MFC美化] USkin使用详解-使用方法

    该种皮肤库资料很少,用法与前面几种类似. 它主要有:USkin.dll ,USkin.lib,USkin.h和Sakura.msstyles这四个文件.皮肤格式是.u3.SkinBuilder是USk ...

  10. Scala 中Null, None, Nothing, Nil

    转自:http://blog.csdn.net/bluejoe2000/article/details/30465175 在scala中这四个类型名称很类似,作用确实完全不同的. None是一个obj ...