Unable to style place holder text in Scss

Question

I am new to SCSS .I am trying to style my place holder text from light to dark grey. Attached is the html code:

 <div class="form-group">
     <textarea class="thread-textarea" ng-maxlength="255" maxlength="255" ng-model="newMessage.Content" ng-keyup="keycount($event)"placeholder="If this is an emergency, call 911. Otherwise, type your message here. We try to respond within 24 hours."title="Type your message" spellcheck="true" aria-labelledby="typeYourMessage"></textarea>
     <span class="aria-hidden" id="typeYourMessage">Type your message</span>
 </div>

Attached is my related scss code.

 $darkgrey: #333333;
 textarea{
     @include placeholder
     {
       color: $darkgrey;
     }
 }

I want to change the color of placeholder from grey to dark grey. Any help would be highly appreciated.

That's not how you select an input placeholder. See here: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Turnip, Oct 10 '16 at 19:10
@Turnip With Bourbon it would work like that: http://bourbon.io/docs/#placeholder My guess is that Bourbon is not properly set up. — Fabian Schultz, Oct 10 '16 at 19:17
Off topic: Consider using semantic color variable names. What happens when the boss says `$darkgrey` should be orange? — isherwood, Oct 10 '16 at 19:25

orangeh0g · Answer 1 · 2016-10-10T19:26:44.060

1

/* cross browser way */

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
textarea::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
textarea:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
textarea:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

/* sass whould be like this */
/*
$darkgrey: #333333;
textarea{
  &::-webkit-input-placeholder {
    color: $darkgrey;
  }
  &::-moz-placeholder {
    color: $darkgrey;
  }
  &:-ms-input-placeholder {
    color: $darkgrey;
  }
  &:-moz-placeholder {
    color: $darkgrey;
  }
}
*/

<div class="form-group">
  <textarea class="thread-textarea" ng-maxlength="255" maxlength="255" ng-model="newMessage.Content" ng-keyup="keycount($event)" placeholder="If this is an emergency, call 911. Otherwise, type your message here. We try to respond within 24 hours." title="Type your message"
  spellcheck="true" aria-labelledby="typeYourMessage"></textarea>
  <span class="aria-hidden" id="typeYourMessage">Type your message</span>
</div>

Just take this and apply your sass styles to it.

edited Oct 10 '16 at 19:26

answered Oct 10 '16 at 19:20

orangeh0g

418
2
10

did you copy the commented out css and use that? – orangeh0g Oct 10 '16 at 20:10
Clearly when you click on the "Run code snippet" button from my answer you can see the pink text and when you type in the box the text is normal default black...this answer is working. The SASS in the comment was provided for convenience, I have also verified that is working. – orangeh0g Oct 10 '16 at 20:16
hmm.....correct,However when i put it in the code it is not...investigating the root cause – mohan babu Oct 10 '16 at 20:18
Sorry that you are having this issue. Is this a public site you can share the link or can you create a codepen or js fiddle with all the code and post a link...so it can be looked at completely? – orangeh0g Oct 10 '16 at 20:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125371/discussion-between-mohan-babu-and-orangeh0g). – mohan babu Oct 10 '16 at 20:22

Unable to style place holder text in Scss

1 Answers1