A
A
Anastasia Panfilova2018-04-05 13:19:02
css
Anastasia Panfilova, 2018-04-05 13:19:02

Why doesn't the placeholder font change?

I'm using sass, I want to style the input

<input type="text" placeholder="Какой-то текст" class="input">

I used Google Fonts for layout, chose the Raleway font there, selected the necessary styles and inserted the generated link. Great, the font works. I put it on input, what I enter (value) looks like I need, but not a placeholder. It's the first time I encounter this. And this despite the fact that the second font on the project is picked up by the placeholder. I can't understand what is the reason. Mb because the font is not local? I don't understand, please tell me.
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700&amp;subset=latin-ext" rel="stylesheet">

input
    font-size: 14px
    font-family: "Raleway", sans-serif !important
    font-weight: 400

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Anastasia Panfilova, 2018-04-05
@nemarta

I found the answer, I didn’t have Cyrillic in the generated link
I found Raleway with Cyrillic support, added it locally and everything is fine
Apparently, Raleway was used before on plain text, since it is listed in my system fonts

B
bqio, 2018-04-05
@bqio

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
font-size: 14px
font-family: "Raleway", sans-serif !important
font-weight: 400
}
:-ms-input-placeholder { / * Internet Explorer 10-11 */
font-size: 14px
font-family: "Raleway", sans-serif !important
font-weight: 400
}
::-ms-input-placeholder { /* Microsoft Edge */
font-size : 14px
font-family: "Raleway", sans-serif !important
font-weight: 400
}

T
tyzberd, 2018-04-05
@tyzberd

input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: inherit;}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
  opacity: 1; }

input:-ms-input-placeholder {
  /* IE 10+ */
  color: inherit; }

input:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
  opacity: 1; }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question