zoukankan      html  css  js  c++  java
  • 修改placeholder的样式

      在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>
  • 相关阅读:
    pat 09-排序1. 排序(25)
    pat 06-图2. Saving James Bond
    hdu 2818 Building Block
    并查集
    hdu 1213 How Many Tables
    hdu 1232 畅通工程
    hdu 1258 Sum It Up
    如何查看Navicat 查询结果
    Navicat查询功能怎么用
    如何设置Navicat 筛选向导
  • 原文地址:https://www.cnblogs.com/nelsonlei/p/8134531.html
Copyright © 2011-2022 走看看