更改文本区域的占位符文本颜色

Posted 2023-03-05

【中文标题】更改文本区域的占位符文本颜色

【英文标题】：change placeholder text color of textarea

【发布时间】：2017-10-03 06:26:07

【问题描述】：

我知道有 this 发布关于更改占位符文本的帖子。我已经尝试在我的 textarea 标签上实现了

textarea::-webkit-input-placeholder 
color: #fff;


textarea:-moz-placeholder  /* Firefox 18- */
color: #fff;  


textarea::-moz-placeholder   /* Firefox 19+ */
color: #fff;  


textarea:-ms-input-placeholder 
color: #fff;  

但它什么也没做。我错过了什么？

这就是我的textarea 之一的样子

<textarea
  onChange=(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)
  placeholder="Overall Satisfaction Question"
  name="SEO__Question__c"
  type="text"
  className="slds-input"
  value=firstQuestion.SEO__Question__c ? firstQuestion.SEO__Question__c : ''
  style=inputStyle
  autoFocus
/>

【问题讨论】：

color: #fff; :) 我不敢问：你的背景颜色是什么 ;) - 是的，我的意思是你的代码工作得很好，否则......至少 Chrome .

@RokoC.Buljan 这是一张深色图像，输入清晰。没有白色背景。 :)

我需要这个链接***.com/questions/9451902/…

【参考方案1】：

用引号括起来：

onchange="(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)"

否则，它应该可以正常工作：

textarea::-webkit-input-placeholder 
  color: #0bf;


textarea:-moz-placeholder  /* Firefox 18- */
  color: #0bf;  


textarea::-moz-placeholder   /* Firefox 19+ */
  color: #0bf;  


textarea:-ms-input-placeholder 
  color: #0bf;  


textarea::placeholder 
  color: #0bf;  

<textarea placeholder="test"></textarea>

【讨论】：

@Mike 如果你知道 CSS 的特殊性，你不应该使用!important（仅在额外的比赛情况下）。

【参考方案2】：

我不确定，但我认为现在没有必要使用前缀。

textarea::placeholder 
  color: #fff;  

【讨论】：

您可以在 Mozilla Developers 网站中找到包含兼容性信息的文章：developer.mozilla.org/en-US/docs/Web/CSS/…。 TLDR：某些浏览器仍需要前缀。

Safari (v12) 今天仍然需要前缀

【参考方案3】：

::-webkit-input-placeholder 
       color: orange;
    
    :-moz-placeholder  /* Upto Firefox 18, Deprecated in Firefox 19  */
       color: orange;  
    
    ::-moz-placeholder   /* Firefox 19+ */
       color: orange;  
    
    :-ms-input-placeholder   
       color: orange;  
    

【参考方案4】：

textarea::placeholder 颜色: #fff;