Unable to convert placeholder value to bold in SCSS

Question

I am naive to SCSS. I'm planning to convert the 'data-placeholder' following code in html to bold in SCSS:

 <optic-select-input id="placeholder"data-placeholder="Choose or type  
  subject..."  title = "Type your subject">

Here is my effort in SCSS:

 optic-select-input {
     data-placeholder {
         font-weight: bold;
     }
 }

However, this is not showing any impact. Any help would be highly appreciated.

`data-placeholder` isn't a standar attribute, is a generic `data-*` attribute, it does nothing by itself. I suppose you have a JavaScript which read the value of `data-placeholder` and display it. Can you show us a working example? — , Sep 22 '16 at 07:17

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-weight: bold;
}
::-moz-placeholder { /* Firefox 19+ */
  font-weight: bold;
}
:-ms-input-placeholder { /* IE 10+ */
  font-weight: bold;
}
:-moz-placeholder { /* Firefox 18- */
  font-weight: bold;
}

more info on https://css-tricks.com/snippets/css/style-placeholder-text/

Update

Placeholder Mixin SCSS/CSS

edited May 23 '17 at 10:34

Community

1
1

answered Sep 21 '16 at 19:49

Stormhashe

704
6
16

This is css , I want SCSS – user3777766 Sep 21 '16 at 19:52
_"This is css , I want SCSS"_ Of course, the selectors in CSS, in SCSS or in any prepocessor are the same. – Sep 22 '16 at 07:20

score 0 · Answer 2 · answered Sep 21 '16 at 20:43

0

https://github.com/Igosuki/compass-mixins

@import 'compass-mixins/lib/compass';

.optic-select-input{
  @include input-placeholder {
    font-weight: 700;
  }
}

answered Sep 21 '16 at 20:43

poashoas

1,790
2
21
44

Unable to convert placeholder value to bold in SCSS

2 Answers2