html - AngularJS和text-angular:更改输入占位符的CSS样式

在文本角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; }

仍然没有用。如何为输入占位符赋予自定义样式？

最佳答案

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; }

<input placeholder="Content here" />

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

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

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

div {
  border: 1px solid black;
}

<div contenteditable="true" data-text="Enter text here"></div>

关于html - AngularJS和text-angular:更改输入占位符的CSS样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38058839/