Ändern Sie die Textfarbe der inneren Klasse Platzhalter

Question

Ich habe mit einem ziemlich trivialen Problem zu kämpfen, nehme ich an, nie zuvor Erfahrung mit CSS gehabt zu haben. Wie ändere ich die Platzhaltertextfarbe von so etwas?

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

Ich dachte, so etwas wie dies funktionieren könnte, aber es hat nicht

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

Außerdem würde ich gerne wissen, wie das gleiche zu erreichen, wenn seine weiter unten in der Hierarchie verschachtelt. Wäre es möglich, Elemente zwischen dem Zielplatzhalter und dem äußeren Element zu überspringen?

Answer 1

das & cir Element innerhalb eines .square Element Ziel, möchten Sie schreiben:

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

Answer 2

an den Code Ihre Syntax unter Ändern

:

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

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

Es scheint, als ob Sie eine SASS-Syntax verwendet haben.

Hoffe, das hilft!

Answer 3

Versuchen this

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

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

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

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