之前在介绍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. java基础练习 2

    public class Second { /* * 打印出杨辉三角形(要求打印出10行如下图) */ public static void main(String[] args){ int i,j, ...

  2. USB调试不能弹出授权窗口 unauthorized 的解决办法

    今天把 AndroidStudio 1.5 给卸载了,重新安装 2.1版本,据说速度快了很多,结果手机一直没法授权调试,授权USB调试信任PC设备的窗口始终没看到,网上找了好多方法,什么驱动.重启.各 ...

  3. sass---Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  4. 长安大学ACM竞赛部

    本博客为长安大学ACM竞赛部的公共博客,记录长大ACMer的成长点滴. 开此博客,诸君共勉.

  5. Java学习笔记-Json

    //先导入gson到lib,add build path //2015年5月5日22:02:37 package com.alfredsun.thread; import com.google.gso ...

  6. activeX控件注册失败

    请确保该二进制存储在指定的路径中 或者调试它以检查该二进制或相关的 .dll 文件是否有问题 解决办法将程序所需的dll文件复制到 C:\Windows\SysWOW64(64位系统)目录下

  7. Git创建空白新分支

    向分支提交一个初始的空commit,保证完全复位. 创建并切换新分支 git branch <new_branch> git checkout <new_branch> git ...

  8. react重学

    知识点一:react解析中 return {__html:rawMarkup}; 这里的html前边用的是双下划线(谢谢学妹的指点)

  9. 冰刃IceSword中文版 V1.22 绿色汉化修正版

    软件名称: 冰刃IceSword中文版 V1.22 绿色汉化修正版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 2.1MB 图片预览: 软件简介: Ic ...

  10. C#基础--属性

    定义一个Book类: namespace ConsoleTest { public class Book { private string _bookIsbn; private string _boo ...