更改内部类占位符的文本颜色答案

【问题标题】：Change text color of inner class placeholder更改内部类占位符的文本颜色
【发布时间】：2016-12-01 00:19:20
【问题描述】：

我正在努力解决我认为的一个相当微不足道的问题，之前从未有过 CSS 的经验。如何更改此类内容的占位符文本颜色？

<div class="square">
  <input class="circle" placeholder="blue" />
</div>

我认为这样的事情可能会奏效，但它没有

.square{
      .circle::-webkit-input-placeholder {
        color: blue;
      }
}

另外，如果它嵌套在层次结构的更下方，我想知道如何完成相同的操作。是否可以跳过目标占位符和外部元素之间的元素？

【问题讨论】：

纯 CSS 做不到，但是用 SCSS 左右就可以了。

标签： css placeholder pseudo-element

【解决方案1】：

要定位 .square 元素内的 .circle 元素，您需要编写：

.square .circle::-webkit-input-placeholder {

【讨论】：

【解决方案2】：

将您的语法更改为以下代码：

.square .circle::-webkit-input-placeholder {
  color: blue;
}

<div class="square">
  <input class="circle" placeholder="blue" />
</div>

您似乎使用了 SASS 语法。

希望这会有所帮助！

【讨论】：

【解决方案3】：

试试这个..然后检查this

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

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

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

【讨论】：