有时会遇到这样的需求,输入框的默认提示文字与用户输入的文字不同。

<input className="city" placeholder="城市"/>
input {color:#ff7800}

如果只是设置input的颜色的话是达不到想要的效果的,css3有关于设置placeholder的属性-input-placeholder

  • Webkit内核的浏览器和Microsoft Edge使用的是伪元素::-webkit-input-placeholder
  • 火狐19+使用的是伪元素::-moz-placeholder
  • 火狐4-18使用伪类:-moz-placeholder
  • Microsoft 10和11使用伪类:-ms-input-placeholder
  • 伪类和伪元素可以参考这篇文章 css伪类与伪元素
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}

*也可以换为input,以下demo的实现为

<input className="city" placeholder="城市"/>
input{color:#333;}
input::-webkit-input-placeholder {
color: ff7800;
}
input:-moz-placeholder {
/* FF 4-18 */
color: ff7800;
}
input::-moz-placeholder {
/* FF 19+ */
color: ff7800;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: ff7800;
}

参考文档

设置input标签placeholder字体颜色的更多相关文章

  1. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

  2. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  3. 修改input标签placeholder文字颜色

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: ...

  4. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  5. 设置placeholder字体颜色

    /*设置placeholder字体颜色*/::-webkit-input-placeholder{ color: #FFF;}:-ms-input-placeholder{ color: #FFF;} ...

  6. textFiled的placeHolder字体颜色

    self.title=@"修改UITextField的placeholder字体颜色"; UITextField *textTF=[[UITextField alloc]initW ...

  7. [oldboy-django][2深入django]学生管理(Form)-- 编辑(设置input标签属性,设置input标签默认显示值,设置input的类型)

    1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及sub ...

  8. input修改placeholder中颜色和字体大小

    input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-si ...

  9. 设置input标签的placeholder的样式

    设置input样式代码: input::-webkit-input-placeholder{ /*WebKit browsers*/ color: red; } input::-moz-input-p ...

随机推荐

  1. <mvc:annotation-driven />到底帮我们做了啥

    一句 <mvc:annotation-driven />实际做了以下工作:(不包括添加自己定义的拦截器) 我们了解这些之后,对Spring3 MVC的控制力就更强大了,想改哪就改哪里. s ...

  2. musql 添加字段语句

    修改表tax_version添加up_content属性为text类型非空,注释为“更新内容”,字段添加再“name”属性后面 ALTER TABLE `tax_version` ADD `up_co ...

  3. NGINX部署

  4. 【vim】分割窗口、标签页与Quickfix窗口

    vim支持窗口分割和标签页,合适地使用这两种特性可以使文字编辑工作更愉快. 1. 窗口分割 vim支持窗口的水平分割和垂直分割.以下是常用的操作指令或快捷键. 命令 说明 vim -o <fil ...

  5. [Python] 模拟登录网站(。。为了之后操作数据。。)

    我司的内部管理(Web)系统(日报)着实..(mafan).. 所以,就想自己动手增加一下便利性. 计划是, - 桌面程序 用来方便记录(按自己格式,数据随时保存到sqlite中,备用) 通过一览来确 ...

  6. 使用Pylint规范你的Python代码

    Pylint是一个Python代码风格的检查工具,功能上类似于pychecker,默认用PEP8作为代码风格标准,它所提供的功能包括:检查代码行的长度,检查变量命名是否符合规范,检查声明的接口是否被真 ...

  7. django -admin 源码解析

    admin源码解析 单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单 ...

  8. js创建对象方法

    1.对象字面量 let xys={ name:'xys', age:22, height:177 } console.log(xys.age)  //22   2.使用new操作符和构造函数    1 ...

  9. 【codeforces 24D】损坏的机器人

    题目大意:有一只坏了的机器人站在一个n∗m的网格里,初始位置在(x,y).现在每个单位时间内它会随机选左右下三个方向走,如果它随机的方向会走出网格就不会往这个方向走.当然这个机器人也可能原地停留一个单 ...

  10. 剑指offer三十七之数字在排序数组中出现的次数

    一.题目 统计一个数字在排序数组中出现的次数. 二.思路 解法一:遍历数组计数 解法二:考虑到时有序数组,所以采用分查找,找到第一个K 和 最后一个K的位置, 二者相减. 三.代码 解法一: publ ...