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

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

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

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

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


当前回答

对于Bootstrap用户,如果您使用class=“form control”,则可能存在CSS特定性问题。您应该获得更高的优先级:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

或者如果您使用的是Less:

.form-control{
    .placeholder(red);
}

其他回答

这个怎么样

<input type=“text”value=“placeholder text”onfocus=“this.style.color='#000';this.value=“”;“style=”颜色:#f00;" />

没有CSS或占位符,但您可以获得相同的功能。

试试这个吧

input::placeholder 
  color:#900009;
}

对于Bootstrap用户,如果您使用class=“form control”,则可能存在CSS特定性问题。您应该获得更高的优先级:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

或者如果您使用的是Less:

.form-control{
    .placeholder(red);
}

HTML的一部分:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

我将展示如何通过CSS更改“Enter sentence”表达式的颜色:

  ::placeholder{
  color:blue;
   }
<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