• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • ::placeholder

    版本:CSS3

    伪元素::placeholder可以选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。

    语法:

    E::placeholder{sRules}

    设置对象文字占位符的样式。::placeholder伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式颜色,默认的文字占位符为浅灰色。

    ::placeholder {
      color: red;
      font-size: 1.5em;
    }
    
    在使用了::placeholder伪元素的选择器中,仅有小一部分CSS属性可以使用,这个集合可以参考::first-line伪元素。
    这是一个实验中的功能。此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

    浏览器支持

    IE浏览器不支持::placeholder。其余浏览器支持::placeholder

    例子

    <input placeholder="我是红色的!">
    
    <style>
    input::placeholder {
      color: red;
      font-size: 1.2em;
      font-style: italic;
    }
    </style>
    

    兼容写法。火狐支持::-moz-placeholder,IE10支持:-ms-input-placeholder,webkit内核浏览器支持:-webkit-input-placeholder

    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    
    <style>
    
    input::placeholder{color:blue;}
    
    input::-webkit-input-placeholder{color:blue;}
    
    //ie10+
    input:-ms-input-placeholder{color:blue;}
    
    //firefox4-18
    input:-moz-placeholder{color:blue;}
    
    //firefox19+
    input::-moz-placeholder{color:blue;}
    
    </style>
    </head>
    <body>
    
     <input id="test" placeholder="placeholdertext!" />
    
    </body>
    </html>
    

    上篇:::after

    下篇:::selection