之前拿到一个设计图,Placeholder是白色的,所以就查看了一下改变placeholder的方法:

input::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
 

同时,根据http://caniuse.com/,这个方法可以支持IE10以上的浏览器。而且placeholder属性也是兼容到IE10以上的浏览器。

所以两个不存在一个兼容,另外一个不兼容的问题。

另外,之前思考placeholder怎么向下兼容的问题,也就是说兼容ie10一下的浏览器。后来看了一下tmall的网站,发现他们使用label的形式,然后用js控制。

当input域被focus的时候,就把label的颜色变淡,如果input域有输出的时候,就把label隐藏。

--------------------- 本文来自https://blog.csdn.net/zeyu1021/article/details/44563393#

前端福利之改变placeholder颜色的方法(转)的更多相关文章

  1. css3 input placeholder颜色修改方法

    css3 input placeholder颜色修改方法<pre> input::-webkit-input-placeholder { /* placeholder颜色 */ color ...

  2. css只改变input输入框光标颜色不改变文字颜色实现方法

    input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...

  3. 改变placeholder颜色

    /* WebKit browsers */ ::-webkit-input-placeholder { color: red; text-overflow: ellipsis; } /* Mozill ...

  4. [转]改变UITextField placeHolder颜色、字体

    本文转载至 http://m.blog.csdn.net/blog/a394318511/8025170 我们有时需要定制化UITextField对象的风格,可以添加许多不同的重写方法,来改变文本字段 ...

  5. (转) 改变UITextField placeHolder颜色、字体 、输入光标位置等

    我们有时需要定制化UITextField对象的风格,可以添加许多不同的重写方法,来改变文本字段的显示行为.这些方法都会返回一个CGRect结构,制定了文本字段每个部件的边界范围,甚至修改placeHo ...

  6. xml中,button改变背景颜色方法

    在画几个设置界面,用到了button控件,对于button空间的背景色在不同状态下的颜色改变方法,做了一下尝试,发现了两种背景颜色改变的方法,就总结了下. 方法一尝试了好多遍才好,要点在于,在sele ...

  7. Android 改变字体颜色的三种方法

    在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下     1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...

  8. IOS - 6\7下UINavigationBar的颜色的方法改变 ——转载http://www.th7.cn/Program/IOS/201310/155057.shtml

    IOS7下设置UINavigationBar的颜色的方法已经改变(当然如果是用自定义图片的话请忽略---) 首先是区别iOS7和之前版本的方法如下: //如果是iOS7以前的话if (floor(NS ...

  9. 前端js中this指向及改变this指向的方法

    js中this指向是一个难点,花了很长时间来整理和学习相关的知识点. 一. this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: JavaScript函数中的 ...

随机推荐

  1. Python3中发邮件emal(明文/SSL/TLS三种方式)

    #!/usr/bin/env python #-*- coding:utf-8 -*- #Author:lzd import smtplib from email.mime.text import M ...

  2. 11g的新特性:SQL Plan Management(SPM)

    Oracle11g中,Oracle提供dbms_spm包来管理SQL Plan,SPM是一个预防机制,它记录并评估sql的执行计划,将已知的高效的sql执行计划建立为SQL Plan Baseline ...

  3. Java toString()方法

    JDK API java.lang 的Object类中的toString()方法 toString public String toString() 返回该对象的字符串表示.通常,toString 方 ...

  4. yum问题的解决办法

     关于使用yum“The program package-cleanup is...”的解决办法   在使用yum 时总是有提示信息: The program package-cleanup is f ...

  5. REST理解

    内容摘自:<Spring REST> REST是什么:REST是一种软件架构风格,它由建立规模可扩展的web服务的最佳实践和指南构成. 资源: 一切可被访问和操作的东西.资源标识:URI( ...

  6. vue 时间选择器组件

    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...

  7. subprocess in python3.5

    subprocess 该子模块允许你创建新的流程,连接到它们的输入/输出/错误管道,并获取他们的返回值.该模块打算替换多个旧的模块和功能:os.system   和  os.spawn * 使用sub ...

  8. delphi IOS 后台状态保存

    FormSaveState procedure TFrm.FormSaveState(Sender: TObject);begin end; http://stackoverflow.com/ques ...

  9. Cookie&Session会话跟踪技术

    今日内容学习目标 可以响应给浏览器Cookie信息[response.addCookie()] 可以接受浏览器Cookie信息[request.getCookies()] [创建cookie,设置pa ...

  10. maven创建webapp项目

    新建maven项目 勾选 create a simple project 点击next 填写maven项目信息,packaging 选择war,点击Finish 创建成功后,项目结构如下 选择项目右键 ...