Задать вопрос
@nemarta
html

Почему не меняется шрифт для placeholder`а?

Использую sass, хочу стилизовать input
<input type="text" placeholder="Какой-то текст" class="input">

Для вёрстки воспользовалась Google Fonts, выбрала там шрифт Raleway, выбрала нужные начертаний и вставила сгенерированную ссылку. Супер, шрифт работает. Ставлю его на input, то, что ввожу (value) выглядит так, как мне надо, но не плейсхолдер. В первый раз с таким сталкиваюсь. И это при том, что второй шрифт на проекте подхватывается плейсхолдером. Не могу понять в чём причина. Мб потому что шрифт не локальный? Не понимаю, подскажите пожалуйста.
<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
  • Вопрос задан
  • 1299 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@nemarta Автор вопроса
Нашла ответ, у меня в сгенерированной ссылке не указана кириллица
Я нашла Raleway с поддержанием кириллицы, добавила локально и всё хорошо
Видимо, Raleway применялся до этого на просто тексте, так как он числиться у меня в системных шрифтах
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@bqio
https://bqio.github.io/
::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
}
Ответ написан
4 комментария
4 комментария
@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; }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы