HTML5在input背景提示文本(placeholder)的CSS美化
本文转自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美化的更多相关文章
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- input设置背景透明、placeholder的字体颜色及大小
1.设置input背景透明: background:rgba(255,255,255,0.1); 前面三个参数为对应的rgb数值,第四个参数为透明度:0~1,0:透明,1:不透明: 2.设置input ...
- css修改input自动提示的黄色背景
css修改input自动提示的黄色背景 input:-webkit-autofill { background-color: #FAFFBD; background-image: none; -web ...
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- html5中input的type类型有哪些(总结)
html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
- HTML5中input标签有用的新属性
HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...
- 解决默写浏览器中点击input输入框时,placeholder的值不消失的方法
html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...
随机推荐
- 如何自学 Python(干货合集)
http://wenku.baidu.com/view/5108f974192e45361066f583.html
- 基于visual Studio2013解决C语言竞赛题之0422牛顿迭代法
题目
- BZOJ 2599 [IOI2011]Race【Tree,点分治】
给出N(1 <= N <= 200000)个结点的树,求长度等于K(1 <= K <= 1000000)的路径的最小边数. 点分治,这道题目和POJ 2114很接近,2114是 ...
- 【Linux驱动器】Linux-2.6.20.4内核移植
最近一段时间以来一直学习TQ2440内核开发板移植.嫁接驱动器. 真诚地相信这方面的知识有很大的困难,.但有一种观点认为,从看,难度越大,的提升空间的能力更大! ! 1.解压源代码 从Internet ...
- 多模块Maven项目怎样使用javadoc插件生成文档
需求 近期要对一个项目结构例如以下的Maven项目生成JavaDoc文档. Project |-- pom.xml ...
- 跨平台运行ASP.NET Core 1.0(转载)
前言 首先提一下微软更名后的叫法: ASP.NET 5 更名为 ASP.NET Core 1.0 .NET Core 更名为 .NET Core 1.0 Entity Framework 7 更名为 ...
- WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇]
原文:WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇] 在[WS标准篇]中我花了很大的篇幅介绍了WS-MEX以及与它相关的WS规范:WS-Policy.WS-Tra ...
- C#Windows的HelloWorld
在MSDN中找到Form类:MSDN-->.NET开发-->.NET Framework SDK 2.0-->Class Library Reference -->System ...
- UVa 二分图匹配 Biginners
UVa 1045 - The Great Wall Game 最小权匹配 题意:给你一个n*n的棋盘,上面有n个棋子,要求通过移动各个棋子使得棋子在同一行或者同一列或者对角线上,求最小移动次数. 思路 ...
- SSH-Struts(一)——基本原理
简单介绍 Struts框架是MVC的一个实现,它非常好的结合了JSP.Servlet.JavaBean.Taglib等技术.它为MVC的各层提供了良好的支持,就像房地产商盖房子时先盖的大楼框架. 仅仅 ...