如何修改HTML5 input placeholder 颜色
有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素
::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder
因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。
- ::-webkit-input-placeholder { /* WebKit browsers */
- color: #999;
- }
- :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
- color: #999;
- }
- ::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: #999;
- }
- :-ms-input-placeholder { /* Internet Explorer 10+ */
- color: #999;
- }
textareas(文本框可拉伸)风格样式的代码,如下:
- input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
- color: #636363;
- }
- input:-moz-placeholder, textarea:-moz-placeholder {
- color: #636363;
- }
input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定,不要打包整体处理,因为其中一个出问题,其他的都会失效。
- *::-webkit-input-placeholder {
- color: red;
- }
- *:-moz-placeholder {
- color: red;
- }
- *:-ms-input-placeholder {
- /* IE10+ */
- color: red;
- }
在Firefox和IE里,正常input文本颜色覆盖占位符颜色的方法:
- ::-webkit-input-placeholder {
- color: red; text-overflow: ellipsis;
- }
- :-moz-placeholder {
- color: #acacac !important; text-overflow: ellipsis;
- }
- ::-moz-placeholder {
- color: #acacac !important; text-overflow: ellipsis;
- } /* for the future */
- :-ms-input-placeholder {
- color: #acacac !important; text-overflow: ellipsis;
- }
还有一种好办法:
- input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
- color: #666;
- }
- input:-moz-placeholder, textarea:-moz-placeholder {
- color: #666;
- }
- input::-moz-placeholder, textarea::-moz-placeholder {
- color: #666;
- }
- input:-ms-input-placeholder, textarea:-ms-input-placeholder {
- color: #666;
- }
如何修改HTML5 input placeholder 颜色的更多相关文章
- 用css修改HTML5 input placeholder颜色
使用CSS修改HTML5 input placeholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和 ...
- 使用CSS修改HTML5 input placeholder颜色( 转载 )
问题:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: input[placeholder], [placeholder], *[placeholder] ...
- 使用CSS修改HTML5 input placeholder颜色
HTML <input type="text" placeholder="Value" /> 有三种实现方式:伪元素(pseudo-elements ...
- 修改HTML5 input placeholder 颜色及修改失效的解决办法
input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中该属性不被识别 */ ::-webkit- ...
- HTML5 input placeholder 颜色修改示例
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...
- HTML5 input placeholder 颜色 改动
David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeholder], [placeholder], ...
- HTML5 input placeholder 颜色修改
在开发中遇到的一个小问题,记录下来./*placehodel*/ input:-ms-input-placeholder{color:#a9a9a9;}/* Internet Explorer 10+ ...
- 修改HTML5 input placeholder默认颜色
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素 ::-webkit-input-placeholder Mozilla Firefox 4-18使用 ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
随机推荐
- Linux显示一个二进制文件或可执行文件的完整路径
Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt
- tcp_wrapper
介绍 对基于tcp协议开发并提供服务的应用程序,所提供的一层访问控制工具 基于库调用实现其功能 * 库名:libwrap 判断服务是否能够由tcp_wrapper进行访问控制 1. 动态编译 ldd命 ...
- 使用WebApiClient请求和管理Restful Api
前言 本篇文章的内容是WebApiClient应用说明篇,如果你没有了解过WebApiClient,可以先阅读以下相关文章: WebApi client 的面向切面编程 我来给.Net设计一款Http ...
- WPF基础篇之连接数据库
WPF连接DB2数据库 public void ConnectionBD2Func() { //连接数据库字符串,DB2 9.5以下版本使用Data Source=Test,否则查询找不到数据库.DB ...
- 浅谈java编译机制和运行机制
源文件和字节码的组成方式 源文件: 拓展名后跟java的文件即java的源文件. Java 源码编译由以下三个过程组成: 1.分析和输入到符号表 2.注解处理 3.语义分析和生成class文件 流程图 ...
- luoguP2711 小行星
题目描述 星云中有n颗行星,每颗行星的位置是(x,y,z).每次可以消除一个面(即x,y或z坐标相等)的行星,但是由于时间有限,求消除这些行星的最少次数. 输入输出格式 输入格式: 第1行为小行星个数 ...
- [BZOJ1046] [HAOI2007] 上升序列 (dp)
Description 对于一个给定的S={a1,a2,a3,…,an},若有P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < xm)且( ax1 < ...
- 小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容
本来呢,我是有专门整理小程序恶心bug的文章的,每次只要添加汇总就好, 但是呢,鉴于这个问题的恶心程度,所以我把他单独拿出来说了. ---------------------------------- ...
- app图标icon大全
http://tool.58pic.com/tubiaobao/index.php?m=Index&a=ui&p=2 很有用,下载没用,直接右键吧.
- linux下线程的两种封装方式
在网络编程的时候往往需要对Linux下原生的pthread库中的函数进行封装,使其使用起来更加方便,封装方法一般有两种:面向对象和基于对象,下面将分别介绍这两种方式,最后统一分析这两种方式的优缺点: ...