怎么控制表单placeholder属性的样式兼容各大浏览器?
当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种:
下面是css:
.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
} .invalid::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
} input.invalid:-ms-input-placeholder{
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
} input.invalid::-webkit-input-placeholder {
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
}
但我们需要控制placeholder的时候,可以添加这个类invalid就可以了
下面是Html:
<input type="text" class="invalid" placeholder="请输入文字">
怎么控制表单placeholder属性的样式兼容各大浏览器?的更多相关文章
- Yii 2.0 ActiveForm生成表单 ,控制表单label和filed样式,filed一旦报错,前面lable颜色跟着变,看图,帮你解决
需要生成如下图的表单样式,图一:
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- DOM(八)使用DOM控制表单
1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中 ...
- CSS控制表单
一个简单的网站注册页面制作. 创建CSS文件如下: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0 ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- 认识input输入框的placeholder属性
我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- OpenCv实现两幅图像的拼接
直接贴上源码 来源:http://www.myexception.cn/image/1498389.html 实验效果 Left.jpg right.jpg ImageMatch.jpg #inclu ...
- 学习linux内核时常碰到的汇编指令(2)
转载:http://blog.sina.com.cn/s/blog_4be6adec01007xvh.html JNGE∶指令助记符——(有符号数比较)不大于且不等于转移(等价于JL).当SF和OF异 ...
- Emacs 之窗口管理
// */ // ]]> Emacs 之窗口管理 Table of Contents 1. Emacs 窗口相关 1.1. Emacs 里调整 window 大小 1.2. Emacs winn ...
- 深入理解Loadrunner中的Browser Emulation
深入理解Loadrunner中的Browser Emulation 深入理解Loadrunner中的Browser Emulation 3E?']V'VgB5n*S0一:基本介绍51Testing软件 ...
- mysql数据库管理工具sqlyog在首选项里可以设置默认查询分页条数和字体,改写关键字大小写
sqlyog设置一直习惯用sqlyog来管理mysql数据库,但有三个地方用得不是很爽:1.默认查询条数只有1000条经常需要勾选掉重新查询.2.自动替换关键字大小写,有时候字段名为关键字的搞成大写的 ...
- windows修改虚拟内存
右键电脑属性: 高级系统设置: 性能设置: 虚拟内存更改:
- APK瘦身实践
首发地址:http://www.jayfeng.com/2015/12/29/APK%E7%98%A6%E8%BA%AB%E5%AE%9E%E8%B7%B5/ 因为推广的需要,公司需要把APK的大小再 ...
- POJ 3450 后缀数组/KMP
题目链接:http://poj.org/problem?id=3450 题意:给定n个字符串,求n个字符串的最长公共子串,无解输出IDENTITY LOST,否则最长的公共子串.有多组解时输出字典序最 ...
- UVA 1314 最小表示法
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=36117 题意:给定长度为n的字符串,求一个起点使字符串从该起点起的 ...
- node.js整理 07例子
需求 一个简单的静态文件合并服务器,该服务器需要支持类似以下格式的JS或CSS文件合并请求. http://assets.example.com/foo/??bar.js,baz.js 在以上URL中 ...