Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。

但以下CSS对占位符的值没有任何作用:

输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>

但Value仍将保持灰色而不是红色。

是否有方法更改占位符文本的颜色?


当前回答

这会很好的。此处演示:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#666;}输入:-moz占位符,文本区域:-moz占位符{颜色:#666;}input::-moz占位符,文本区域::-moz占位符{颜色:#666;}input:-ms输入占位符,文本区域:-ms输入占位符{颜色:#666;}<input type=“text”placeholder=“Value”/>

其他回答

CSS提供::占位符伪元素。

请注意,Bootstrap中的.placeholder mixin已被弃用。

例子:

input::placeholder { color: black; }

当使用autorefixer时,以上代码将被转换为适用于所有浏览器的正确代码。

Compass有一个开箱即用的混音器。

举个例子:

<input type="text" placeholder="Value">

在SCSS中使用指南针:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

有关输入占位符mixin,请参阅文档。

对于Sass用户:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}
<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>

这会很好的。此处演示:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#666;}输入:-moz占位符,文本区域:-moz占位符{颜色:#666;}input::-moz占位符,文本区域::-moz占位符{颜色:#666;}input:-ms输入占位符,文本区域:-ms输入占位符{颜色:#666;}<input type=“text”placeholder=“Value”/>