最近做项目的时候遇到的一些小样式问题,有关表单。并且在接下来几天的面试人中五个人都没有回答上来,改变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. POS管理系统之出入库单分页查询

    JSP: <html>  <head>    <title>My JSP 'inOutKuPage.jsp' starting page</title> ...

  2. oracle加并行参数PARALLEL

    select /*+ PARALLEL(t,4) */ * from table1

  3. Commons-Collections 集合工具类的使用

    package com.bjsxt.others.commons; import java.util.ArrayList; import java.util.List; import org.apac ...

  4. WM_GETMINMAXINFO消息 中结构体MINMAXINFO

    MINMAXINFO* lpMMI lpMMI->ptMaxSize.x = 800;  // 设置窗口最大化时的宽度 lpMMI->ptMaxSize.y = 600;  // 设置窗口 ...

  5. openStack windows时间偏移

    openstack

  6. OC编程的一些UI细节

    1/如果你想用一个半透明的View遮住当前窗口,连并NavigationBar也一并遮住的话,那么你需要 将视图添加到navigationController的View上 [self.navigati ...

  7. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  8. [QDB] 幽灵分享:QDataSet+TQMSSQLConverter 实战技巧

    转载自QDAC官网网站,文章发现问题可能随时更新,最新版本请访问:http://blog.qdac.cc/?p=3066 [注]本文由网友 幽灵 分享,由 swish 整理并重新编辑.1.将A数据库A ...

  9. 一些bug总结

    1:IE浏览器低版本的parseInt问题; 开发中遇到把月份转为小数时出现bug 例子:parseInt('08')-1; 本来应该得7,但是最后的结果却是-1,月份得-1,根据得到的月份获取的日历 ...

  10. delphi 类方法、类变量、类常量、类属性的研究,自己的研究

    群里我师傅给我的答案: unit Unit4; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Vari ...