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

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-占位符（两个冒号）

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 为空且未聚焦时，它才会定位 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

我自己找到了一个方法..为了让答案部分在其他类似问题中脱颖而出，我选择post在这里回答而不是编辑原始问题。

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

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

(例子在scss,用css记得隐蔽)

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

AngularJS and text-angular: Change CSS style for input placeholder

html

css

input

placeholder

angularjs