最近做项目的时候遇到的一些小样式问题,有关表单。并且在接下来几天的面试人中五个人都没有回答上来,改变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. LibreOffice 打开中文乱码

    From: http://hi.baidu.com/designhouse/item/746130c01f98a42dee4665de 1:文件->打开 2:文件类型:已编码文本

  2. Github上传自己的工程

    1.注册并新建项目 2.配置github for windows 前题:安装相应的github for windows 2.1 获取密钥 可以用命令的模式(Git bash),参考资料中有相应的用法: ...

  3. opencv基于混合高斯模型的图像分割

    #include "stdafx.h" #include <opencv\cv.h> #include <opencv\highgui.h> #includ ...

  4. Mutex

    #include "stdafx.h" #include <string> #include <iostream> #include <Windows ...

  5. JavaScript中的分支结构

    说到JavaScript中的分支结构,我们就不得不提到流程控制这个词,我们所有的程序都是由数据和算法组成的.程序=数据+算法通常我们所说的算法都可以通过"顺序","分支& ...

  6. [转]常用的快速Web原型图设计工具

    转自大神: http://www.cnblogs.com/lhb25/archive/2009/04/25/1443254.html 做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具 ...

  7. Composer实现PHP中类的自动加载

    本篇博客承接上一篇,学习一下Composer实现的PHP的类的自动加载方式.首先说明一下,Composer是PHP针对PHP语言的第三方的依赖管理工具,将工程所用到的依赖文件包含在composer.j ...

  8. c++程序设计之编程思想

    代码块愈小,代码的功能就愈容易管理,代码的处理和移动就愈轻松. 任何一个傻瓜都能写出计算机可以理解的代码,唯有写出人类容易理解的代码,才是优秀的程序员. 绝大多数情况下,函数应该放在它所使用的数据的所 ...

  9. Mac下命令行中用sublime打开指定文件 设置方法

    sublime2版本 官网提供的方法:sublime2 官网提供的方法是:ln -s "/Applications/Sublime Text 2.app/Contents/SharedSup ...

  10. maven构建过程

    [转载]原地址:http://www.cnblogs.com/xdp-gacl/p/4051690.html 上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自 ...