【CSS系列】修改placeholder的样式

末蓝、 2023-06-22 04:24 107阅读 0赞 
  1. <input class="i_input" type="text" placeholder="这是我要改变的样式" />
在input类名后面增加伪类，如.i_input::-webkit-input-placeholder
  • 在谷歌浏览器中

    .i_input::placeholder{

    1.         color: blue;
    2.     }

在这里插入图片描述

  • 兼容性较强

    / Chrome/Opera/Safari /

    1.             ::-webkit-input-placeholder {  
    2.                             color: #999;
    3.                         }
    4.   /* Firefox 19+ */
    5.                 ::-moz-placeholder {
    6.                     color: #999;
    7.                 }
    8.   /* IE 10+ */
    9.                 :-ms-input-placeholder {
    10.                     color: #999;
    11.                 }
    12.   /* Firefox 18- */
    13.         :-moz-placeholder {
    14.             color: #999;
    15.         }
  • 利用type

    input[type=’text’]::-webkit-input-placeholder{

    1.         color: red;
    2.     }

发表评论

表情：
评论列表 （有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读