主要是要区别不同浏览器的不同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. pycharm中debug的使用

    1.未打断点运程序,输出全部结果 2.打断点后,点击debug,代码执行到断点前停止(断点所在行不执行) 3.step over,是在单步执行时,在函数内遇到子函数时不会进入子函数内单步执行,而是将子 ...

  2. 百万年薪python之路 -- 内置函数

    内置对象(68个)第一部分 内置函数一共68个 一些可以重要性不高的内置函数,只需了解即可 all() any() bytes() callable() chr() ord() complex() d ...

  3. 计算机基础之编程 + 基本组成 + 组成补充 + 操作系统(day01整理)

    目录 一 计算机基础之编程 (一) 什么是编程语言 (二) 什么是编程 (三) 为什么要编程 二 计算机的基本组成 (一) CPU(大脑) (1) 控制器 (2) 运算器 (二) 存储器(记忆) (1 ...

  4. django-URL之从URL中获取关键字(七)

    主要用于查询操作. 主要目录 book/views.py from django.http import HttpResponse from django.shortcuts import rende ...

  5. Flask解析(二):Flask-Sqlalchemy与多线程、多进程

    Sqlalchemy flask-sqlalchemy的session是线程安全的,但在多进程环境下,要确保派生子进程时,父进程不存在任何的数据库连接,可以通过调用db.get_engine(app= ...

  6. 神舟+win10+ubuntu16.04+256GSSD+1THHD双系统安装加openssl踩坑之旅

    上海最近搞活动调休,要搞深度学习,win上还是不方便,准备弄个ubuntu.于是有以下回忆文字. 在机器上装了个双系统.花了两天.再也不想玩了. 准备用ubuntu来做深度学习的. 本文写于2019年 ...

  7. Linux Cannot allocate memory问题

    查找了一下相关文档,发现这个错误的含义其实就是像它自己说的,没法分配内存了. The problem is inherent with the way Java allocates memory wh ...

  8. (JavaScript) base64 字符串 和 ArrayBuffer 之间转换

    base64 --> ArrayBuffer function base64ToUint8Array(base64String) { const padding = '='.repeat((4 ...

  9. Linux性能分析

    生产环境服务器变慢,诊断思路和性能评估 整机:top 代码 public class JavaDemo2 { public static void main(String[] args) { whil ...

  10. Git学习以及使用

    最近学习了下git的使用,不得不感叹真的是甩了svn几条街 官网下载实在太慢,附加一个网站方便大家下载https://github.com/waylau/git-for-win 安装好后打开Git B ...