CODEWITHSUNDEEP
cssplaceholderpseudo-element
Priyath Gregory
Priyath Gregory

Reputation: 987

Change text color of inner class placeholder

I'm struggling with a fairly trivial problem I assume, never having had prior experience with CSS. How do I change the placeholder text color of something like this?

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

I thought something like this might work, but it didn't

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

Also, I would like to know how to accomplish the same if its nested further down the hierarchy. Would it be possible to skip elements in between the target placeholder and the outer element?

Upvotes: 0

Views: 1265

Answers (3)

Karthick Nagarajan
Karthick Nagarajan

Reputation: 1345

Try this..and check this

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

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

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

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

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Change your syntax to the code below:

.square .circle::-webkit-input-placeholder {
  color: blue;
}
<div class="square">
  <input class="circle" placeholder="blue" />
</div>

It seems like you've used a SASS syntax.

Hope this helps!

Upvotes: 1

Saraband
Saraband

Reputation: 1590

To target the .circle element inside a .square element, you want to write :

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

Upvotes: 1

Related Questions