How to style a data- placeholder attribute in SCSS?

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;
        }
    }
}

@NirjharVermani It is data-placeholder not placeholder!! – mohan babu Oct 10 '16 at 21:18 — mohan babu, Oct 10 '16 at 21:18

Fantasterei · Answer 1 · 2016-10-11T16:52:56.433

2

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,"");
}

edited Oct 11 '16 at 16:52

answered Oct 10 '16 at 21:20

Fantasterei

465
3
11

@mohanbabu Sure it does. Have a look here: https://jsfiddle.net/fcm2jvjv/ Look at the hierachy, too. Mixins need to defined before their usage. I edited it in my post as well. – Fantasterei Oct 11 '16 at 16:51
@Fantasteri it is optic-select-input , not plain input – mohan babu Oct 11 '16 at 16:59
1

@mohanbabu "optic-select-input" is no valid HTML5 tag. Anyway, the code I delivered will rendered correctly for the data-placeholder attribute. – Fantasterei Oct 11 '16 at 17:10

score 0 · Answer 2 · answered Feb 13 '23 at 21:46

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;
        }
      }
    }

How to style a data- placeholder attribute in SCSS?

2 Answers2