更改内部阶级占位符的文本颜色

Question

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

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

我以为这样的事情可能会起作用，但没有

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

另外，如果它进一步嵌套在层次结构下，我想知道如何完成同样的事情。可以跳过目标占位符和外部元素之间的元素吗？

Answer 1

靶向.circle元素。

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

Answer 2

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

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

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

似乎您使用了SASS语法。

希望这会有所帮助！

Answer 3

尝试这个..并检查此

::-webkit-input-placeholder {
   color: red;
}
:-moz-placeholder { /* Firefox 18- */
   color: red;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}
:-ms-input-placeholder {  
   color: red;  
}