【问题标题】: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 这是一张深色图像,输入清晰。没有白色背景。 :)

标签: html css


【解决方案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;  
}
&lt;textarea placeholder="test"&gt;&lt;/textarea&gt;

【讨论】:

  • @Mike 如果你知道 CSS 的特殊性,你不应该使用!important(仅在额外的比赛情况下)。
【解决方案2】:

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

textarea::placeholder {
  color: #fff;  
}

【讨论】:

【解决方案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;}

    【讨论】:

      猜你喜欢
      • 2017-05-18
      • 2013-02-04
      • 1970-01-01
      • 2010-11-23
      • 1970-01-01
      • 2013-10-06
      • 2019-12-09
      • 2014-11-22
      相关资源
      最近更新 更多