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; ...
随机推荐
- SQL Server备份脚本
declare @bakfile varchar(30), @bakfilediff varchar(30),@pathfull varchar(50),@pathdiff varchar(50)se ...
- Partitioning & Archiving tables in SQL Server (Part 2: Split, Merge and Switch partitions)
Reference: http://blogs.msdn.com/b/felixmar/archive/2011/08/29/partitioning-amp-archiving-tables-in- ...
- spring mvc1
DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring IoC容器无缝集成,从而可以获得Spring的所有好 ...
- 庆祝下:iOS 开发者企业级计划(299美元/年帐户+邓白氏码免费) 和 Windows Phone公司应用(公司帐户99美元+Symantec企业证书299美元/年))顺利发布成功
时间:2013-11-15,地址:http://192.168.0.8 网站可下载三个终端应用直接安装IOS,Windows Phone,Android iOS: 企业版IDP通过 iTunes.使 ...
- 在树莓派2代B型/3代 上安装Fedora23 - Installing Fedora 23 on Raspberry Pi 2 model B or Raspberry Pi 3
本文主要用于记录安装过程,以便日后查阅回顾. 之前在自己的树莓派上运行的一直是通过NOOB安装的Raspbian,但是本人平时更喜欢用Fedora作为开发和使用环境,而且Raspbian上的软件包通常 ...
- 谈谈javascript放在哪里更合适
关于javascript放在哪里更合适 脚本位置: 例如以下代码: <html> <head> <title>Script Example</title&g ...
- angularjs1 实现地图添加自定义控件(搜索功能)及事件
// 添加地图自定义控件的事件 function addEventHandler(target, eventName, handler) { if (target.addEventListener) ...
- Excel 取得一定范围内最大的有值的行号
dim iRow iRow = Range("A1000").End(xlUp).Row
- Spring使用非applicationContext.xm 默认名的配置文件的配置
Spring默认的配置文件是applicationContext.xml,但是有些时候,希望拆分Spring的配置文件,让其单一化,每一个都只进行自己的配置,如图所示 那么就需要在web.xml中配置 ...
- linux dns 配置
今天线上出现一个bug,图片上传失败. 经过排查发现,上传图片接口调用失败,ping 域名提示 unknow host,ping IP正常. 猜想可能是dns的问题.解决过程如下: /etc 下没有 ...