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区域>

其他回答

这个简短而干净的代码:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

这里还有一个例子:

.form控件::-webkit输入占位符{颜色:红色;宽度:250px;}h1小时{颜色:红色;}<div class=“col-sm-4”><input class=“form control”placeholder=“在此处输入文本..”ng model=“需要电子邮件”/></div>

我认为这段代码会起作用,因为占位符仅用于输入类型文本。因此,这一行CSS将足以满足您的需要:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}
<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 type="text" class="input-control" placeholder="My Input">   

在头部添加以下CSS。

<style type="text/css">
    .input-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                    color: red !important;
                    opacity: 1; /* Firefox */
    }
        
     .input-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
                    color: red !important;
     }
        
     .input-control::-ms-input-placeholder { /* Microsoft Edge */
                    color: red !important;
     }
</style>

以下是参考链接。https://www.w3schools.com/howto/howto_css_placeholder.asp