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

Question

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

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

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

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

另外，我想知道如何完成相同的，如果其进一步向下嵌套层次。是否可以跳过目标占位符和外部元素之间的元素？

Answer 1

要指定.square元素中的.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

尝试this..and检查this

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

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

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

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