最近做项目的时候遇到的一些小样式问题,有关表单。并且在接下来几天的面试人中五个人都没有回答上来,改变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属性的字体颜色问题的更多相关文章

  1. iOS 修改UITextField的placeholder属性的字体颜色(修改UITextField占位符字体的颜色)

    只要把原来的placeholder属性改为attributedPlaceholder属性即可 具体代码如下图:

  2. 如何更改placeholder属性中文字颜色

    如何更改placeholder属性中文字颜色 placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会 ...

  3. 移动端input的disabled属性对字体颜色影响

    对于表单输入,input是很好的选择,这次记录主要是正对input的value值字体在Android和iOS(11)设备下显示不同问题: 如下图:1.2的区别主要是分别设置disabled.reado ...

  4. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  6. 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  7. 关于ie8下disabled属性:字体颜色问题

    在ie8下,input/textarea输入框如果使用disabled属性,字体的颜色会变灰,这时我们可以使用另一种方法实现它. 不使用disabled,用readonly代替: input[read ...

  8. form表单中enctype属性作用

    上传文件时,提交的表单属性里需要加enctype="multipart/form-data",才能提交文件信息,不然会报错.那么enctype属性的作用是什么?就是设置表单传输的编 ...

  9. 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; ...

随机推荐

  1. CentOS 6.5安装Oracle 11.2.0.4------CentOS 6.5安装

    规划: IP:192.168.213.199 mask: 255.255.255.0 gateway:192.168.213.1 DNS1:202.101.172.35 磁盘分区: 磁盘总大小:25G ...

  2. shell 中调用其他的脚本

    方法有三种: 1 使用source 2 使用 . 3 使用sh 简单实验: first.sh #!/bin/bashecho 'your are in first file' second.sh #! ...

  3. Oracle中将查询出的多条记录的某个字段拼接成一个字符串的方法

    11g里面用listagg: select listagg(name,',') within (order by id) from table 10g里面用wm_concat:select wm_co ...

  4. 二模15day1解题报告

    T1.合并序列(minval) 给出长为 n的AB两个序列求两两相加中最小的n个. 据说有证明(在蓝书上,优先队列部分)先把A[1~n]+b[1]入队,然后每取一个a[x]+b[y]就把a[x]+b[ ...

  5. 关于Hibernate XXX is not mapped 错误

    我的实体类是这么配置的 @Entity(name="EntityName")  //必须,name为可选,对应数据库中一的个表 就会出现 XXX is not mapped.   ...

  6. Delphi 用文件流读取文本文件字符串的方法

    procedure TForm23.Button4Click(Sender: TObject); var pstr:Pchar; mestr,Str1:string; FS:TFilestream; ...

  7. python模块之configparser

    configparser用于处理特定格式的文件,其本质上是利用open来操作文件. # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2:v2 # 值 [section ...

  8. js监听浏览器,关闭,刷新

    //浏览器关闭或刷新事件 function bindCloseBrowser() { var a = "注意!!\n您即将离开页面!离开后可能会导致数据丢失\n\n您确定要离开吗?" ...

  9. ActiveMQ实现负载均衡+高可用部署方案

    一.架构和技术介绍 1.简介 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.完全支持JMS1.1和J2EE 1.4规范的JMS Provider实现 2.activemq的特 ...

  10. jquery实现静态html文件的include嵌入效果

    //引入jQuery的js 建立footer.html,内容为要嵌入的内容. 在需要嵌入的页面中加入: $.get("footer.html",function(data){ $( ...