H5表单中placeholder属性的字体颜色问题
最近做项目的时候遇到的一些小样式问题,有关表单。并且在接下来几天的面试人中五个人都没有回答上来,改变placeholder属性的默认字体颜色,感觉有必要总结一下。

如何改变默认字体的颜色?
@blue: #026b9c;
input {
width: 100%;
height: 74/30rem;
line-height: 74/30rem;
color: @blue;
border-radius: 16/30rem;
border: 1px solid @blue_light;
font-size: 28/30rem;
padding-left: 15/30rem;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: @blue;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: @blue;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: @blue;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: @blue;
}
主要是通过伪元素+私有前缀这种方式实现,具体实现机制暂时不甚了解,存在兼容性问题。。。当我问这个问题的时候,希望有更好的办法?不过好多人把input的color,甚至于background-color都搞混淆了,好尴尬。
H5表单中placeholder属性的字体颜色问题的更多相关文章
- iOS 修改UITextField的placeholder属性的字体颜色(修改UITextField占位符字体的颜色)
只要把原来的placeholder属性改为attributedPlaceholder属性即可 具体代码如下图:
- 如何更改placeholder属性中文字颜色
如何更改placeholder属性中文字颜色 placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会 ...
- 移动端input的disabled属性对字体颜色影响
对于表单输入,input是很好的选择,这次记录主要是正对input的value值字体在Android和iOS(11)设备下显示不同问题: 如下图:1.2的区别主要是分别设置disabled.reado ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- 关于ie8下disabled属性:字体颜色问题
在ie8下,input/textarea输入框如果使用disabled属性,字体的颜色会变灰,这时我们可以使用另一种方法实现它. 不使用disabled,用readonly代替: input[read ...
- form表单中enctype属性作用
上传文件时,提交的表单属性里需要加enctype="multipart/form-data",才能提交文件信息,不然会报错.那么enctype属性的作用是什么?就是设置表单传输的编 ...
- JS处理数组内如果相同ID追加一个属性(如字体颜色)
var arr=[{id:0},{id:0},{id:3},{id:2},{id:0},{id:4},{id:0},{id:1},{id:1},{id:2},{id:2}]; for(var i=0; ...
随机推荐
- Java面向对象㈡ -- 继承与多态
Java的继承是通过extends和implement来实现的,Java不支持多继承,但是Java支持多层继承以及多实现(接口).Java继承有一个关键字super是用来指向父类.Java继承衍生出覆 ...
- Java中的闪光点:ThreadLocal是线程Thead的局部变量,可替代同步机制的设计,值得学习和研究
线程局部变量ThreadLocal,是Java支持的一种线程安全机制,目的是解决多线程的并发问题. 具体来讲,就是多个线程访问该实例对象的变量时,该实例对象将其存储为键值对的形式,保证各个线程(键)分 ...
- C# 打开指定目录并定位到文件
private void OpenFolderAndSelectFile(String fileFullName) { System.Diagnostics.ProcessStartInfo psi ...
- sass安装与使用
安装: 1.安装ruby 2.安装Koala,用于sass编译 3.gem install sass(mac电脑安装如果安装报错,一般是权限问题,没有权限安装到ruby下面,因此可以尝试sudo ge ...
- JSON.parse
摘自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse The J ...
- 三维场景中使用BillBoard技术
三维场景中对于渲染效果不是很精致的物体可以使用BillBoard技术实现,使用该技术需要将物体实时朝向摄像机,即计算billboard的旋转矩阵M. 首先根据摄像机位置cameraPos和billBo ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- 浅析NRF51822合并文件之app_valid_setting_apply
[原创出品§转载请注明出处] 出处:http://www.cnblogs.com/libra13179/p/5787084.html 我们打开app_valid_setting_apply.hex如下 ...
- python迭代器,生成器,装饰器,context模块
迭代器iteration 是访问集合元素的一种方式,只能往前不能往后迭代器的特点:1,访问者不需要关注迭代器内部结构,只需通过next()不断取下一个内容2,访问不能回退3,循环较大数据集合时,省内存 ...
- 页面可见生Page Visibility
Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...