之前在介绍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. 使用Netsil监控Kubernetes上的微服务

    ubernetes是容器编排和调度领域的王者,它击败了竞争对手Docker Swarm和Apache Mesos,开启了闪耀的未来,微服务可以自修复,可以自动扩展,可以跨zone,region甚至跨云 ...

  2. yarn计算一个节点容量及其配置项

    mapred-site.xml mapreduce.map.memory.mb 1536 每个Map Container的大小 mapreduce.reduce.memory.mb 2560 每个Re ...

  3. 同盾安卓 Android应用 集成步骤：

    Android SDK 新版 Android SDK 旧版 1.点击下载最新SDK(当前版本3.0.3),并解压fraudmetrix-xxx.zip文件.解压后文件目录为: fm-core-xxx ...

  4. Hololens生成与安装(旁加载)应用

    Hololens生成应用的几种方式: 一:HoloToolkit编辑器生成appx应用 二:Vistul Studio 2015 创建应用 旁加载概述: 你可以将应用旁加载到你的设备,而无需将它们提交 ...

  5. 采用Jenkins搭建持续集成环境

    Jenkins介绍 Jenkins是一个CI工具.它可以根据设定持续定期编译,运行相应代码:运行UT或集成测试:将运行结果发送至邮件,或展示成报告... 这样做的最终目的是: 让项目保持健康的状态.如 ...

  6. CodeForces 669E Little Artem and Time Machine

    树状数组,$map$. 可以理解为开一个数组$f[i][j]$记录:$i$这个数字在时间$j$的操作情况. 操作$1$:$f[x][t]++$.操作$2$:$f[x][t]--$.操作$3$:$f[x ...

  7. 创建 userSettings/Microsoft.SqlServer.Configuration.LandingPage.Properties.Settings 的配置节处理程序时出错: 未能加载文件或程序集“System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”或它的某一个依赖项。系统没找到指定的文件

    创建 userSettings/Microsoft.SqlServer.Configuration.LandingPage.Properties.Settings 的配置节处理程序时出错: 未能加载文 ...

  8. oracle中关于Oracle Database 11g Express Edition 打不开的问题

    报的错误是http://127.0.0.1:...什么的找不到该文件 如果是127.0.0.1没问题,而且oracle中5个服务没问题,而且oracle可以启动.. 最后的问题是8080端口冲突,如果 ...

  9. fedora 使用trove的redstack 安装openstack环境

    以下命令可能是你经常需要用到的: dnf list installed 列出所有dnf安装的包 dnf remove packagename 删除包   先获取trove-integration gi ...

  10. CentOS 7 systemd service开机启动设定

    #vi /etc/systemd/system/xxx.service [Unit] Description=startup script test [Service] Type=simple Exe ...