Question

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

它仍然无效。如何为输入占位符提供自定义样式？

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

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

Answer 2

我自己找到了一种方法..为了让答案部分突出其他类似的问题，我选择在这里发布答案而不是编辑原始问题。

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

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

（示例是scss，如果使用css，请记得隐身）

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

2 个答案: