文档章节

placeholder文字颜色

fanyx
 fanyx
发布于 2016/10/18 11:54
字数 185
阅读 6
收藏 0

默认的placeholder字体颜色呈浅灰色,有时候会需要修改文字颜色,解决方案如下:

修改所有的input

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/* Firefox 18- */
  color: red;
}
::-moz-placeholder{/* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder {
  color: red;
}

修改某个标签

#myInput::-webkit-input-placeholder {
  color: red;
}
#myInput:-moz-placeholder {
  color: red;
}
#myInput:-ms-input-placeholder {
  color: red;
}

示例:

html &css

<input type="text" placeholder="修改颜色">
<input type="text" placeholder="修改颜色">
<input type="text" placeholder="修改颜色">
<input type="text" placeholder="修改颜色">

::-webkit-input-placeholder {
	 color: red;
}
:-moz-placeholder {/* Firefox 18- */
	 color: red;
}
::-moz-placeholder{/* Firefox 19+ */
	 color: red;
}
:-ms-input-placeholder {
	color: red;
}

效果图: 输入图片说明

html &css

<input type="text" placeholder="修改颜色">
<input id="myInput" type="text" placeholder="修改颜色">
<input type="text" placeholder="修改颜色">
<input type="text" placeholder="修改颜色">

::-webkit-input-placeholder {
	 color: red;
}
:-moz-placeholder {/* Firefox 18- */
	 color: red;
}
::-moz-placeholder{/* Firefox 19+ */
	 color: red;
}
:-ms-input-placeholder {
	color: red;
}

效果图: 输入图片说明

© 著作权归作者所有

fanyx
粉丝 0
博文 3
码字总数 1544
作品 0
成都
前端工程师
私信 提问
placeholder在不同浏览器下的表现及兼容方法

1、什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失...

china008
2015/04/08
77
0
小为/placeholder.js

image-placeholder.js 一个Javascript库,用于在浏览器端生成,提供完善的配置和简单的方法。EN-Readme 一、预览 官方网站文档和示例 二、特点 不依赖任何 js 框架,比如 jq YUI压缩大小1.6...

小为
2015/12/28
0
0
placeholder.js 增加 img 标签使用方式

使用 引入 placeholder.js 到你的前段代码中: 1.调用placeholder.js的方法进行替换,举个例子如下: 2.使用URL参数的方式配置Img的属性options,例如: 或者携带参数options: 请注意img标签的...

小薇
2015/12/20
913
0
客户端生成占位图--placeholder.js

image-placeholder.js 一个Javascript库,用于在浏览器端生成placeholder image,提供完善的配置和简单的方法。EN-Readme 预览 官方网站示例 特点 不依赖任何 js 框架,比如 jq 小于 1k ,具...

小薇
2015/12/18
1K
2
js控制input的placeholder文字颜色

文字颜色的变化主要是通过设置input的class属性值来控制,class=invalid的时候css生效

别寒
2016/12/13
713
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部