AngularJS 和 text-angular：更改输入占位符的 CSS 样式答案

【问题标题】：AngularJS and text-angular: Change CSS style for input placeholderAngularJS 和 text-angular：更改输入占位符的 CSS 样式
【发布时间】：2016-10-29 18:08:07
【问题描述】：

在 text-angular github 项目的 wiki 页面上，它说：

https://github.com/fraywing/textAngular/wiki/Styling-the-Editor

我尝试使用此代码：

 <div text-angular="text-angular" ta-toolbar="[]" ng-model="message"
         placeholder="<div class='placeholder'>Write Coment...</div>"></div>

但屏幕会显示为： placeholder show as raw html

看了这个网站后我尝试了以下方法：https://css-tricks.com/almanac/selectors/p/placeholder/

    ::-webkit-input-placeholder { color: red; }

还是不行。如何为输入占位符提供自定义样式？

【问题讨论】：

我认为您不能在 div 中包含 placeholder...
用输入定义一个占位符
这也取决于您的浏览器。看我的帖子

标签： html css angularjs input placeholder

【解决方案1】：

placeholders 应该与输入元素一起使用，而不是在 div 上。您可能必须将您的 div 标签更改为inputs。

您对占位符的样式有正确的想法，但您可能需要根据您的浏览器调整供应商前缀

Chrome、Safari、Opera、Edge）：:::-webkit-input-placeholder

Firefox 4 到 18：:-moz-placeholder（只有一个冒号）

Firefox 19+：::-moz-placeholder（两个冒号）

IE 10 和 IE 11 :-ms-input-placeholder

/* Chrome, Safari, Opera and Edge */
::-webkit-input-placeholder { color: red; }
/* Firefox 4 through 18 */
:-moz-input-placeholder { color: red; }
/* Firefox 19+ */
::-moz-input-placeholder { color: red; }
/* IE10 and IE11 */
:-ms-input-placeholder { color: red; }

&lt;input placeholder="Content here" /&gt;

您可以尝试的另一件事是将contenteditable 属性附加到您的 div，这将使其行为类似于输入元素。然后，您可以设置一个数据属性来模拟占位符的行为。

使用before 伪选择器，该选择器仅在 div 为空且未聚焦时将其作为目标。

[contenteditable=true]:empty:not(:focus):before{
  content:attr(data-text);
  color: red;
}

div {
  border: 1px solid black;
}

&lt;div contenteditable="true" data-text="Enter text here"&gt;&lt;/div&gt;

【讨论】：

这对其他 html 输入控件很好。但我实际上是在询问文本角度的特殊情况。感谢您的回答，但它不适用于此控件..

【解决方案2】：

我自己找到了一种方法。为了让答案部分在其他类似问题中脱颖而出，我选择在此处发布答案而不是编辑原始问题。

使用 .placeholder-text 类。它不是自定义类，而是 text-angular 在显示占位符时使用的临时类。

.ta-bind {
 &.placeholder-text {
    color: red;
 }
 &:not(.placeholder-text) {
    color: black;
 }
}

(示例在scss中，如果使用css记得隐藏)

【讨论】：