How to style a data- placeholder attribute in SCSS? - html

Question

I am trying to style a data-placeholder in SCSS.
I want to change the color of data-placeholder from the existing color to dark-grey but my attempts have not been successful, what am I missing? Code below
HTML5
<optic-select-input id="placeholder" class="dataplaceholder" data-placeholder="Choose or type subject..." title="Type your subject" ng-model="newMessage.Subject" data-maxlength="50" spellcheck="true">
SCSS
.dataplaceholder{
#include placeholder(#A9A9A9,"");
}
#mixin placeholder($color, $size:"") {
&:-data-placeholder{
color:$color !important;
#if $size != "" {
font-size: $size;
}
}
}

Answer 1

Add a square brackets like [data-placeholder].
#mixin placeholder($color, $size:"") {
&[data-placeholder] {
color:$color !important;
#if $size != "" {
font-size: $size;
}
}
}
.dataplaceholder{
#include placeholder(#A9A9A9,"");
}

Answer 2

Not related to this specific example in the question
But to anyone that came across this question. If you are doing this, you likely are overriding a component someone else made and cannot modify directly.
You can wrap the component, then target the HTML element that has the data placeholder.
In a React project that I recently worked on, I wrapped the outer component with something like
<div className={styles.featureContent}>
Then in the SCSS file for my component that used something from a shared component library for form inputs
.featureContent {
// padding
.subheadline,
.description {
// margins
div[data-placeholder] {
// you can begin to target this with specificity
&::before {
// this is what i was targeting for my task.
// Making the placeholder italic.
font-style: italic;
}
}
}