之前在介绍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. springboot学习笔记-1 第一个springboot示例

    springboot是一个微框架,其设计的目的是为了简化spring框架的搭建和配置过程.从而使开发人员不再需要定义样板化的配置.下面是springboot的入门案例:它演示了利用springboot ...

  2. Linux环境下安装Redis步骤即问题解决

    第一步:将安装包在window平台上解压后拷贝到Linux机器的/usr/soft目录下,并且为文件夹和文件赋予最高权限,chmod+x *: 第二步:进入到redis-3.2.6目录下,执行make ...

  3. 【成长之路】【python】python基础1

    1.python的优点 高级语言:不需考虑底层实现的细节 可移植性:python程序不需经过任何修改就可以在所有的平台系统上运行 可扩展性:可以把用c和c++实现的代码嵌到python中 可嵌入性:可 ...

  4. qtCreator 快捷键

    编号 快捷键 功能 1 Esc 切换到代码编辑状态 2 F1 查看帮助(选中某一类或函数,按下F1,出现帮助文档) 3 F2 在光标选中对象的声明和定义之间切换(和Ctrl+鼠标左键一样的效果,选中某 ...

  5. [Q]“获取AutoCAD安装信息时失败...”解决方法

    “获取AutoCAD安装信息时失败...”解决方法:在“setup.exe”上右键,以管理员权限运行即可.

  6. C#中的重写和覆盖的区别

    #中重写(override)和覆盖(new)的区别 重写用关键字 virtual 修饰的方法,叫虚方法.可以在子类中用override 声明同名的方法,这叫“重写”.相应的没有用virtual修饰的方 ...

  7. Genymotion下载失败解决方法

    Genymotion下载虚拟机版本时会很慢,而且经常下载失败 解决方法如下: 1.先去选择下载你需要的版本,之后会下载(很慢),或者失败. 2.到C:\Users\yourname\AppData\L ...

  8. android之控件与布局

    基本控件:TextViewButtonEditTextImageViewAlertDialog.BubliderProgressDialog 四种基本布局的特殊属性: LinerLayout andr ...

  9. Gs_Class.Gs_DataFunction数据操作类库20160225

    using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security ...

  10. cocos2d安装配置及打包成Android

    vs+python+cocos2d python下载:点这里 这里需要下载Python 2.X版本.曾经以为要下载3.x版本 后来装上发现cocos2d-x提供的python运行报错,所以卸载以后重新 ...