修改placeholder的样式

news/2024/7/3 5:36:38 标签: APP类型, JavaScript 和jQuery类型

 

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

  

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

 

  css代码:

  

 1  #input-test{
 2         color: #FFC0CB;
 3         font-size: 1.2em;
 4         width: 180px;
 5         height: 36px;
 6 }
 7 #input-test::-webkit-input-placeholder{
 8         color: #ADD8E6;
 9 }
10 #input-text::-moz-placeholder{11         color: #ADD8E6;        
12 }
13 #input-text:-ms-input-placeholder{14         color: #ADD8E6;        
15 }

  

  HTML代码:

  

1 <div id="container">
2     <input id="input-test" type="text" placeholder="修改placeholder样式" />
3 </div>

 


http://www.niftyadmin.cn/n/1733238.html

相关文章

使用命令设置ubuntu的ip地址

使用命令设置ubuntu的ip地址新装了ubuntu&#xff0c;虽然使用图形界面明明已经设置好了ip&#xff0c;网关等等&#xff0c;但是不能上网。一个朋友提醒说&#xff0c;也许是设置的问题&#xff0c;试试命令行的设置。于是搜索了一下怎么设置&#xff0c;结果还真的成功了。具…

RabbitMQ第三个实操小案例——发布者/订阅者(Publish/Subscribe)、广播交换器(FanoutExchange)

文章目录RabbitMQ第三个实操小案例——发布者/订阅者&#xff08;Publish/Subscribe&#xff09;、广播交换器&#xff08;FanoutExchange&#xff09;写法一、配置类配置方式写法二、注解方式&#xff08;RabbitListener&#xff09;RabbitMQ第三个实操小案例——发布者/订阅者…

linux中实现jboss自启动

在该目录/etc/rc.d/init.d/中 创建文件:jboss 内容如下 # cat /etc/rc.d/init.d/jboss #!/bin/bash # chkconfig: 2345 99 01 # description: JBoss 3.2.3 case "$1" in start) su - root -c /jboss/jboss/bin/run.sh & ;; stop) …

重启虚拟机启动Docker常见问题

文章目录重启虚拟机启动Docker常见问题一、Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?二、admin is not in the sudoers file. This incident will be reported.&#xff08;没有这个问题请自觉跳过&#xff09;三、…

ESP8266接温度传感器18B20时序校准

陈拓 chentuoms.xab.ac.cn 2020/06/22-2020/06/25 1. 概述 在《ESP8266_SDK发送温度数据到阿里云》 https://blog.csdn.net/chentuo2000/article/details/105592791 https://zhuanlan.zhihu.com/p/132582024 一文中我们将温度传感器DS18B20的温度数据传送到了阿里云物联网平…

RabbitMQ第四个实操小案例——DirectExchange

文章目录RabbitMQ第四个实操小案例——DirectExchangeRabbitMQ第四个实操小案例——DirectExchange DirectExchange&#xff1a;这种交换机的模式跟前面的Fouout&#xff08;广播&#xff09;不太一样&#xff0c;DirectExchange 会将接收到的消息根据规则路由到指定的Queue&a…

javascript面向对象技术基础(六)

http://sdcyst.javaeye.com/blog/296492作用域、闭包、模拟私有属性 先来简单说一下变量作用域&#xff0c;这些东西我们都很熟悉了&#xff0c;所以也不详细介绍。 Js代码 var sco "global"; //全局变量 function t() { var sco "local"; //函…

javascript面向对象技术基础(四)

http://sdcyst.javaeye.com/blog/288808类、构造函数、原型 先来说明一点:在上面的内容中提到,每一个函数都包含了一个prototype属性,这个属性指向了一个prototype对象(Every function has a prototype property that refers to a predefined prototype object --section8.6.…