之前在介绍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. [前端性能提升]--图片转化为base64

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...

  2. 原生js

  3. GroupingView点击分组标题不展开，或点击标题部分文字不展开

    GroupingView结构:    分组标题groupTextTpl是用两个DIV 来进行修饰的,在mouseDown时,EXT会查找css class=".x-grid-group-hd ...

  4. Ubuntu环境openresty的安装

    Ubuntu环境openresty的安装 相关库的安装 安装openresty需要的库  apt-get install libreadline-dev libncurses5-dev libpcre ...

  5. Java中IO流

    * IO流用来处理设备之间的数据传输 * Java对数据的操作是通过流的方式 * Java用于操作流的类都在IO包中 * 流按流向分为两种:输入流,输出流. * 流按操作类型分为两种: * 字节流 : ...

  6. 敏捷开发（五）- 框架SCRUM内容

    本文主要是为了检测你对SCRUM的了解和使用程度,通过本文你可以检测一下     1.你们的SCRUM项目中各个角色是否合格,    2.SCRUM上面需要的会议是否有遗留,会议过程是否正确    3 ...

  7. 来看看CBIS 2017中国（上海）大数据产业创新峰会有哪些大师出席

    CBIS 2017中国(上海)大数据产业创新峰会,围绕"数据+产业.企业+数据.技术+人才.品牌+市场.应用+发展"相继展开话题讨论. CBIS 2017中国(上海)大数据产业创新 ...

  8. js得到当前页面的url信息方法

    js得到当前页面的url信息方法:http://www.cnblogs.com/zuosong160522/p/5755615.html js获取url传递参数,js获取url?后面的参数:http: ...

  9. HTC与英特尔联手打造无线VR解决方案

    除了TPCAST无线附件组件之外,HTC早前还宣布了与英特尔合作研发WiGig无线VR解决方案,他们还愿意寻找更多的合作伙伴以带来进一步的解决方案. HTC希望确保其Vive头显可以实现无线升级,让用 ...

  10. [SOJ] shortest path in unweighted graph

    Description 输入一个无向图,指定一个顶点s开始bfs遍历,求出s到图中每个点的最短距离. 如果不存在s到t的路径,则记s到t的距离为-1.   Input 输入的第一行包含两个整数n和m, ...