Css placeholder font family

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

Для вёрстки воспользовалась Google Fonts, выбрала там шрифт Raleway, выбрала нужные начертаний и вставила сгенерированную ссылку. Супер, шрифт работает. Ставлю его на input, то, что ввожу (value) выглядит так, как мне надо, но не плейсхолдер. В первый раз с таким сталкиваюсь. И это при том, что второй шрифт на проекте подхватывается плейсхолдером. Не могу понять в чём причина. Мб потому что шрифт не локальный? Не понимаю, подскажите пожалуйста.

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

Нашла ответ, у меня в сгенерированной ссылке не указана кириллица
Я нашла Raleway с поддержанием кириллицы, добавила локально и всё хорошо
Видимо, Raleway применялся до этого на просто тексте, так как он числиться у меня в системных шрифтах

::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
>

input::placeholder < /* Chrome, Firefox, Opera, Safari 10.1+ */
font-size: 12px;
font-family: «Montserrat», sans-serif !important;
font-weight: 500;
>

input:-ms-input-placeholder < /* Internet Explorer 10-11 */
font-size: 12px;
font-family: «Montserrat», sans-serif !important;
font-weight: 500;
>

input::-ms-input-placeholder < /* Microsoft Edge */
font-size: 12px;
font-family: «Montserrat», sans-serif !important;
font-weight: 500;
>
Не забывайте про ;

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

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

Есть ли смысл применять React для написания простого сайта?

Источник

Styling Placeholder Text Using CSS

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Placeholder text will automatically inherit the font family and font size of the regular input text, but you may be in a situation where you want to change the placeholder text color. You can accomplish that with the ::placeholder pseudo-element. In our example, let’s define a custom color for our placeholder text, and let’s also override the inherited font size to have smaller placeholder text. Here’s our base input styling:

input[type="text"]  font-family: monospace; font-size: 20px; color: peru; > 

::-webkit-input-placeholder  color: peachpuff; font-size: 13px; > ::-moz-placeholder  color: peachpuff; font-size: 13px; > :-ms-input-placeholder  color: peachpuff; font-size: 13px; > ::placeholder  color: peachpuff; font-size: 13px; > 

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases. Learn more about us

Источник

Default Font Family for Placeholder in HTML: An Overview could be the rephrased

The screenshot shows different examples of how it appears in various browsers such as Chrome and Firefox on a Mac. Bootstrap 3 has a pre-defined color for the placeholder, which can be found by inspecting the CSS directly. Another solution is to search for «form-control» in the file and locate the placeholder.

Changing font-family for placeholder

If anyone requires the selectors for placeholders that work across all browsers, they can be provided.

.mainLoginInput::-webkit-input-placeholder < font-family: 'myFont', Arial, Helvetica, sans-serif; >.mainLoginInput:-ms-input-placeholder < font-family: 'myFont', Arial, Helvetica, sans-serif; >.mainLoginInput:-moz-placeholder < font-family: 'myFont', Arial, Helvetica, sans-serif; >.mainLoginInput::-moz-placeholder

Utilize this to ensure compatibility with popular web browsers.

.mainLoginInput::placeholder < /* Chrome, Firefox, Opera, Safari 10.1+ */ font-family: 'myFont', Arial, Helvetica, sans-serif; opacity: 1; /* Firefox */ >.mainLoginInput:-ms-input-placeholder < /* Internet Explorer 10-11 */ font-family: 'myFont', Arial, Helvetica, sans-serif; >.mainLoginInput::-ms-input-placeholder < /* Microsoft Edge */ font-family: 'myFont', Arial, Helvetica, sans-serif; >

For those using Firefox 19 or later, the recommended prefix is ::-moz-placeholder .

And the code looks like this

.mainLoginInput::-moz-placeholder

CSS font-size property, Definition and Usage. The font-size property sets the size of a font. Show demo ❯. Default value: medium.

What is the default color and font for input placeholders

Based on your intended use, you have the option to utilize a color picker tool or your Browser’s developer console to ensure accuracy. However, there are other factors to consider.

The color of the input placeholder by default is not consistent across all browsers.

The code shown in your screenshot is identified as #8e8e8e .

Here are a few instances based on the browser used: For Mac users of Chrome, the code is #a9a9a9 For Mac users of Firefox, the code is #777777

The CSS for Bootstrap 3 contains a «default» placeholder color» that can be examined through various methods. The following excerpt is taken directly from the CSS of Bootstrap v3.3.7.

.form-control::-moz-placeholder < color:#999; opacity:1 >.form-control:-ms-input-placeholder < color:#999 >.form-control::-webkit-input-placeholder

Bootstrap 3 has set the default color for placeholders as #999 , whereas Bootstrap 4 has defined it as #636c72 .

To find it, open the bootstrap.css file and then search for «form-control.» Look for the placeholder after combining ctrl and f .

 .form-control::-moz-placeholder < color: #999; opacity: 1; >.form-control:-ms-input-placeholder < color: #999; >.form-control::-webkit-input-placeholder

As per the documentation of Bootstraps, it is stated that.

The default font-size and line-height for Bootstrap’s global styling is 14px and 1.428 respectively. These values are assigned to both the element and all paragraphs. Additionally, .

By default, the computed line-height of paragraphs is 10px and they are given a margin of half that value at the bottom.

How to change placeholder font, More info? It works for both in this example: .font1::-webkit-input-placeholder < font-family: "Times New Roman", Times, serif;

How to use custom fonts on a input placeholder?

Assign the font-family attribute to the ::placeholder pseudo-element.

It is important to mention that input does not automatically receive font-family inheritance because of the user-agent stylesheets. A relevant example can be seen in the following code snippet.

The styling has been applied to the placeholder, but the text remains unstyled.

input::placeholder < font-family: Arial; >input:-ms-input-placeholder < /* Internet Explorer 10-11 */ font-family: Arial; >input::-ms-input-placeholder < /* Microsoft Edge */ font-family: Arial; >

IOS placeholder text being cropped and font won’t change, Your CSS shows both at 2em, but check to see that the input field font size isn’t being overridden to 1em somewhere else (as the problem seems to occur at

How to change placeholder font

Additional details? This example illustrates that it is effective for both.

.font1::-webkit-input-placeholder < font-family: "Times New Roman", Times, serif; background-color: yellow; >.font2::-webkit-input-placeholder

Times New Roman placeholder font: 
  
 
Arial placeholder font: 
 

Placeholder font style is coming as different for textfield and textarea, why different you can check your code from css stylesheet · The placeholder has some default styles according to browser’s default css settings,

Источник

Css placeholder font family

Как уже было сказано выше. placeholder может быть в css и html.

Placeholder перевод

Что важнее «Placeholder псевдоэлемент» или «Placeholder атрибут?«

Либо этот же вопрос можно задать так:

— Что первичнее «Placeholder css» или «Placeholder html?»

Конечно же важнее — «Placeholder атрибут«, потому, что он устанавливается в тег и соответственно имеет физическую оболочку.

А «Placeholder псевдоэлемент» — даже по его типу можно понять, что он будет вторичным — это слово » псевдоэлемент «(ни в коем случае не обижая «псевдоэлемент»)

Из-за этого и начнем с первого пункта!

«Placeholder атрибут» или «placeholder в html»!

Что такое «placeholder» в html?

Зачем нужен атрибут «placeholder» в html?

Атрибут «placeholder» в html нужен для создания «текста внутри» поля ввода(input или textarea)

Синтаксис атрибута «placeholder html»!

Пример вывода атрибута «placeholder html».

Выше вы видели синтаксис использования атрибута placeholder, теперь давайте этот код выведем прямо здесь:

Пример textarea и атрибута «placeholder».

Пример input и атрибута «placeholder».

Исключение для атрибута placeholder

Есть ли «исключение для атрибута placeholder»?

Одно из исключений поля ввода, где не работает «атрибут placeholder» — это type submit, для данного типа, value — будет исполнять(условно) роль placeholder

Пример исключения для атрибута placeholder

Вывод исключения для атрибута placeholder

«Placeholder css» или placeholder псевдоэлемент«

Кроме того, что «placeholder» может быть атрибутом, но и «placeholder» может быть «псевдоэлементом». хотя его поведение отличается от. например before — т.е. он не выводится отдельно от элемента, а он выводится внутри «поля ввода».

Синтаксис placeholder псевдоэлемент«

Зачем нужен псевдоэлемент placeholder«

«Псевдоэлемент placeholder» нужен для того, чтобы изменить свойства выводимого текста в поле ввода, например цвет.

Источник

::placeholder

The ::placeholder pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style the placeholder text of a form element. As in, the text set with the placeholder attribute:

::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: pink; >::-moz-placeholder < /* Firefox 19+ */ color: pink; >:-ms-input-placeholder < /* IE 10+ */ color: pink; >:-moz-placeholder < /* Firefox 18- */ color: pink; >

Important warning: this syntax is non-standard, thus all the naming craziness. It doesn’t appear in the spec at all. :placeholder-shown is standard, and even spec authors seem to think ::placeholder will be the standardized version. Like any psuedo, you can scope it to specific elements as needed, like:

input[type="email"].big-dog::-webkit-input-placeholder

The difference between :placeholder-shown and ::placeholder

:placeholder-shown is for selecting the input itself when it’s placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text. Here’s a diagram: I found this highly confusing as:

1. the specs only have :placeholder-shown and not ::placeholder
2. :placeholder-shown can still affect the styling of the placeholder text, since it’s a parent element (e.g. font-size).

Note that :placeholder-shown is a pseudo class (it’s an element in a particular state) and ::placeholder is a pseudo element (a visible thing that isn’t really in the DOM). Distinguishable by single-versus-double colons.

Tab Atkins cleared it up for me via email:

:placeholder-shown, being a pseudo-class, has to select an existing element – it selects the input whenever you’re in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.

This functionality is not standardized. That means that every browser has a different idea on how it should work.

Firefox originally implemented this as a pseudo class, but changed it for a bunch of reasons. To make a long story short, you can’t do as much with a pseudo class.

For instance, if you want to change the color of the text when the input is focused. You would use a selector like input:focus::placeholder , which you wouldn’t be able to do with a pseudo class (they don’t stack the same way).

IE10 supports this as a pseudo class, rather than an element. Everyone else has implemented a pseudo element.

Firefox placeholder color

You might notice how in Firefox the color of the placeholder looks faded when compared to other browsers. In the image below, Firefox 43 is shown on the left whilst Chrome 47 is shown on the right:

This is because, by default, all placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:

You can see more by testing this demo out in Firefox.

The pseudo element supports styling of these properties:

• font properties
• color
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity

The pseudo class supports most (if not all) of these properties as well, but isn’t as flexible for the reasons outlined above.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Источник