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

  placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)

  适用范围:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

  因为是HTML5中新增的属性,所以会存在兼容性问题。下面说说浏览器的支持情况:

  IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。

  placeholder的用法,举例:

   <input type="text" placeholder="请输入您要搜索的内容!">

  结果:

  

 方式1:因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

<style>
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
</style>

  针对不同浏览器或不同版本的浏览器会有不同的写法,会添加相应的前缀。

  注意:

  1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input

  2、针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input。

  3、由于placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input

方式2:建议使用该方式 如果是在手机客户端webview 只使用-webkit内核方式即可。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
font-size: 16px;
} input:-moz-placeholder, textarea:-moz-placeholder {
color: #666;
font-size: 16px;
} input::-moz-placeholder, textarea::-moz-placeholder {
color: #666;
font-size: 16px;
} input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #666;
font-size: 16px;
}

如何更改placeholder属性中文字颜色的更多相关文章

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

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

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

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

  3. VC改变CListCtrl 表格中文字颜色,和背景颜色。

    (1)首先需要自定义一个类,派生自CListCtrl.如下图: (2)然后在派生类的头文件中声明一个成员函数,如下图: (3)在源文件中实现该成员方法,如图: (4)在源文件中做消息映射,如图: 这时 ...

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

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

  5. H5表单中placeholder属性的字体颜色问题

    最近做项目的时候遇到的一些小样式问题,有关表单.并且在接下来几天的面试人中五个人都没有回答上来,改变placeholder属性的默认字体颜色,感觉有必要总结一下. 如何改变默认字体的颜色? @blue ...

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

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

  7. 更改NavigationView侧滑菜单文字颜色

    NavigationView menu默认icon和title会随着菜单状态改变而改变,选择某个菜单后再次打开侧边菜单后会发现该菜单的icon和title会变成应用的主颜色,其他菜单项仍然为黑色. 如 ...

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

    input::-webkit-input-placeholder{ color:red; } /* WebKit, Blink, Edge */ input::-moz-placeholder{ co ...

  9. Vue点击改变属性(改变文字颜色)

    <template> <div class="tab-control"> <div v-for="(item , index) in tit ...

随机推荐

  1. reduxDevTool 配置

    import { createStore, compose, applyMiddleware } from 'redux' import reducer from './reducer' import ...

  2. ASP.NET学习记录点滴

    1.判读是否是第一次请求,有表单的页面,第一次请求时get请求,而不是post请求,所以可以用来判断请求是否是get,在apsx页面中,有微软封装的属性IsPostBack来判断是否是get还是pos ...

  3. Nginx 反向代理报400错误解决方法!

    如果后端真是的服务器设置有类似防盗链或者根据http请求头中的host字段来进行路由或判断功能的话,如果反向代理层的nginx不重写请求头中的host字段,将会导致请求失败,报400错误,解决办法: ...

  4. #P4770 [NOI2018]你的名字 的题解

    题目背景 实力强大的小A 被选为了ION2018 的出题人,现在他需要解决题目的命名问题. 题目描述 小A 被选为了ION2018 的出题人,他精心准备了一道质量十分高的题目,且已经把除了题目命名以外 ...

  5. echarts做飞线图

    先上图,要不感觉没有说服力: 飞线图应该是大屏中很常见的一种了,通常你可以很轻易的用datav做一个飞线图,而且datav做的大屏逼格真的很高,本身也是开源免费的项目,开箱即用,上手简单……行了回归正 ...

  6. iOS之Xcode提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploading this package

    https://www.jianshu.com/p/6d465a0ea58e 这句英文翻译过来就是: 无法继续交付:现有的传输程序实例目前正在上载此包 原因:上传的动作被记录在UploadToken中 ...

  7. AttributeError: 'Word2Vec' object has no attribute 'vocab'

    在 Gensim 1.0.0 版本后移除了 vocab,需使用 model.wv.vocab

  8. 前端面试:js数据类型

    js数据类型是js中的基础知识点,也是前端面试中一定会被考察的内容.本文旨在知识的梳理和总结,希望读者通过阅读本文,能够对这一块知识有更清晰的认识.文中如果出现错误,请在评论区指出,谢谢. js数据类 ...

  9. Apache Shiro安全(权限框架)学习笔记二

    课程目标 通过学习本课程掌握权限管理的设计思想及方法,使用Shiro框架完成权限管理功能开发. 1.  理解基于资源的权限管理方法. 2.  掌握权限管理的数据模型. 3.  掌握不使用shiro开发 ...

  10. JS开发中的各大技巧

    「String Skill」:字符串技巧 「Number Skill」:数值技巧 「Boolean Skill」:布尔技巧 「Array Skill」:数组技巧 「Object Skill」:对象技巧 ...