主要是要区别不同浏览器的不同css类

在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了。

input::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
input:-moz-placeholder{}                  /* Firefox版本4-18 */
input::-moz-placeholder{}                  /* Firefox版本19+ */
input:-ms-input-placeholder{}           /* IE浏览器 */
注1:冒号前写对应的input或textarea元素等。
注2:placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。
如:
input::-webkit-input-placeholder {
color: red;
font-size: 25px;
}

更改input标签的placeholder的样式的更多相关文章

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

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

  2. 关于input标签和placeholder在IE8,9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  3. 更改input【type=file】样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js更改input标签的读写属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 改变input标签中placeholder显示的颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #A9A9A9; } :-moz-placeholder { /* Mozilla ...

  6. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

  7. input框中修改placeholder的样式

    有时间input标签的placeholder属性会出现问题,下面是修改placeholder的样式demo input::-webkit-input-placeholder{ color:red; f ...

  8. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  9. 关于 html input标签的几个常用操作

    1.清除 input 标签默认样式 input { -moz-appearance: none; outline: 0; text-decoration: none; outline: none; b ...

随机推荐

  1. 微信小程序——获取openGid

    小编使用的Node版本的解密方式(其他方式自行替换写法也是 一样的) 1.到微信小程序官网下载解密demo包 2.获取用户[openid] 3.调用 [wx.showShareMenu] 并且设置 w ...

  2. 百万年薪python之路 -- MySQL数据库之 常用数据类型

    MySQL常用数据类型 一. 常用数据类型概览 # 1. 数字: 整型: tinyint int bigint 小数: float: 在位数比较短的情况下不精确 double: 在位数比较长的情况下不 ...

  3. qt读取文本

    直接 代码: // lyy : 2016/8/26 16:40:11 说明:读取文本 bool FileOpeartion:: GetTheTextContent (const QString str ...

  4. 拒绝黑盒应用-Spring Boot 应用可视化监控

    图文简介 逻辑关系 效果演示 快速开始 1.Spring Boot 应用暴露监控指标[版本 1.5.7.RELEASE] 首先,添加依赖如下依赖: <dependency> <gro ...

  5. Leetcode Tags(13)Bit Manipulation

    一.477.汉明距离总和 输入: , , 输出: 解释: 在二进制表示中,4表示为0100,14表示为1110,2表示为0010.(这样表示是为了体现后四位之间关系) HammingDistance( ...

  6. 谁说程序员不懂浪漫?用Python每天自动给女朋友免费发短信

    前言 之前发过一篇文章,用 Python 制作的给父母天气预报提醒的小工具天气变冷了,给父母制作一个天气提醒小助手,这篇文章我同步到博客上之后,有读者在评论区留言,对于部分微信没有网页版接口,导致无法 ...

  7. apply 、 call 、 bind的用法

    1.apply 方法 apply:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments);即A对象应用B对象的方法. apply方法最多只能有两个参数——新 ...

  8. 小白学 Python(14):基础数据结构(集合)(上)

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  9. 回话技术-Cookie-记录上一次访问时间

    效果: 第一次访问: 再次访问: <%@ page import="java.util.Date" %> <%@ page import="java.t ...

  10. 聊一聊Java中的各种运算符

    计算机之所以叫“计算机”,其最基本用途之一就是运算,对应刚刚接触Java的小伙伴而言,熟悉并掌握Java中的各种运算符及其在表达式中的运算优先级是十分必要的. 算术运算 算术运算主要用来处理数学中的加 ...