zoukankan      html  css  js  c++  java
  • placeholder的样式设置

     

    在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选择器均不支持占位文本。
     
    eg:
    css代码
     inputt{
            color: #FFC0CB;
            font-size: 1.2em;
             180px;
            height: 36px;
    }
    input::-webkit-input-placeholder{
            color: #ADD8E6;
    }
    input::-moz-placeholder{  //不知道为何火狐的placeholder的颜色是粉红色,怎么改都不行,希望有大牛路过帮忙指点
            color: #ADD8E6;        
    }
    input:-ms-input-placeholder{  //由于我的IE刚好是IE9,支持不了placeholder,所以也测试不了(⊙﹏⊙),有IE10以上的娃可以帮我试试
            color: #ADD8E6;        
    }
    html代码
    <div id="container">
        <input id="input-test" type="text" placeholder="修改placeholder样式" />
    </div>
    效果如下图所示:
    PS:除此之外,还能修改placeholder的font-weight等样式。
    eg:
    我加了句 "font-weight: bold;",效果如下图所示:
  • 相关阅读:
    Linux curl命令详解
    Go语言获取命令行参数
    MySQL对sum()字段 进行条件筛选,使用having,不能用where
    PHP的 first day of 和 last day of
    easyui-datagrid个人实例
    easyui-layout个人实例
    easyui-combotree个人实例
    easyui-combo个人实例
    easyui-combotree个人实例
    easyui datagrid加载数据和分页
  • 原文地址:https://www.cnblogs.com/520BigBear/p/7760140.html
Copyright © 2011-2022 走看看