修改placeholder的样式

2018-06-24 02:08:51来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

  在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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS列表及导航条

下一篇:那些容易遗忘的web前端问题