本文转自http://www.webhek.com/html5-placeholder-css/

在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同。但相信以后会统一。

/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; } /* webkit专用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* mozilla专用 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

事实上仅仅是一句代码,但为了实现范围最广的浏览器支持,加上了各自的浏览器引擎前缀(Vendor
Prefix)
,突然变成了10的几行代码,我们尽快希望这种情况在过去。

HTML5在input背景提示文本(placeholder)的CSS美化的更多相关文章

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

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

  2. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  3. input设置背景透明、placeholder的字体颜色及大小

    1.设置input背景透明: background:rgba(255,255,255,0.1); 前面三个参数为对应的rgb数值,第四个参数为透明度:0~1,0:透明,1:不透明: 2.设置input ...

  4. css修改input自动提示的黄色背景

    css修改input自动提示的黄色背景 input:-webkit-autofill { background-color: #FAFFBD; background-image: none; -web ...

  5. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  6. html5中input的type类型有哪些(总结)

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

  7. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  8. HTML5中input标签有用的新属性

    HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...

  9. 解决默写浏览器中点击input输入框时,placeholder的值不消失的方法

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

随机推荐

  1. createObjectURL方法 实现本地图片预览

    ie6 可以直接显示本本地路径的图片 如: <img src="file://c:/3.jpg" />  ~~~网上都说ie7就不支持这种文件系统路径的url,但测试 ...

  2. Android学习笔记:多个AsyncTask实例的并发问题

    AsyncTask是Android给开发者提供的一个简单轻量级的多线程类,通过它我们可以很容易新建一个线程让在后台做一些耗时的操作(如IO操作.网络访问等),并在这个过程中更新UI.之所以说它轻量级, ...

  3. HTMLParser-简单HTML和XHTML解析

    使用HTMLParser模块解析HTML页面 HTMLParser是python用来解析html和xhtml文件格式的模块.它可以分析出html里面的标签.数据等等,是一种处理html的简便途径.HT ...

  4. Google Map Android api V2 中使用MapView遇到CameraUpdateFactory is not initialized!的解决办法

    先说一下 Map V2 API Key 的问题吧: 在打包APP时需要自己生成一个XXX.keystore 用这个密室库生成的SHA1去申请的key 作为AndroidManifest.xml 中的K ...

  5. OC补充

    OC 1成员变量默认初始化为0 2匿名对象:就是没有名字的对象,比如:(不建议使用) 3 [Car new]->speed = 300; [[Car new] run];(运行结果speed为0 ...

  6. two sets of Qt binaries into the same process的解决办法

    突然出现了这样问题,吓死我,然后只是把原来编译好的app里面所有的东西删除再编译就好了. 如果删除后不行,可以试试后面的截图所说,反正我是没有试过的 Starting /Qtwork/build-te ...

  7. Ubuntu一些配置和技巧

    安装google-chrome wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb sudo d ...

  8. mac下和windows下清空DNS缓存

    在WIN下: > ipconfig /flushdns 在mac下: 对于低版本系统,在命令行窗口(terminal)输入 lookupd -flushcache 即可: $ sudo look ...

  9. UML02-用例图

    1.泛化表示一般和特殊的关系.用例之间存在泛化关系,参与者之间存在泛化关系,参与者和用例之间存在泛化关系. 2.画出用例图. 系统允许管理员通过磁盘加载存货数据来运行存货清单报告: 管理员通过从磁盘加 ...

  10. 基于visual Studio2013解决C语言竞赛题之1048打印矩阵

      题目 解决代码及点评 /* 48. 找规律填写N×N方阵.如N=8时, 其方阵为: */ #include <stdio.h> #include <stdlib.h& ...