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

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

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

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

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


当前回答

您还可以设置文本区域的样式:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>

其他回答

对于Bootstrap和Less用户,有一个mixin.placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

在html文件中:

<input type="text" placeholder="placeholder" class="redPlaceHolder">

在css文件中:

.redPlaceHolder{
   color: #ff0000;
}

此代码将使用::占位符选择器更改占位符的颜色。

::-webkit-input-placeholder { 
    /* Edge */
    color: red;
}

:-ms-input-placeholder { 
    /* Internet Explorer */
    color: red;
}

::placeholder {
    color: red;
}

您还可以设置文本区域的样式:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>

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

举个例子:

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

在SCSS中使用指南针:

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

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