Placeholder css/html, псевдо элемент/атрибут примеры placeholder
"placeholder css/html" - объединим сразу несколько тем, "placeholder в css" и "placeholder в html". "Placeholder псевдоэлемент" и/или "Placeholder атрибут?". В последнем абзаце рассмотрю вопросы, которые никуда не вошли.
Подробно о placeholder в css и html
- Вообще о placeholder
- Placeholder атрибут или "placeholder в html" Исключение для атрибута placeholder
- "Placeholder css" или placeholder псевдоэлемент"
- Дополнительно о placeholder css placeholder font size
- Скачать
шрифт placeholder css
placeholder image
Вообще о placeholder
Как уже было сказано выше... placeholder может быть в css и html.
placeholder в css - это псевдоэлемент
placeholder в html - это атрибут
Placeholder перевод
Один из общих вопросов и "placeholder" - это "placeholder перевод":
Что важнее "Placeholder псевдоэлемент" или "Placeholder атрибут?"
Либо этот же вопрос можно задать так:
- Что первичнее "Placeholder css" или "Placeholder html?"
Конечно же важнее - "Placeholder атрибут", потому, что он устанавливается в тег и соответственно имеет физическую оболочку.
А "Placeholder псевдоэлемент" - даже по его типу можно понять, что он будет вторичным - это слово "
Из-за этого и начнем с первого пункта!
"Placeholder атрибут" или "placeholder в html"!
Начнем с заголовка - "Placeholder атрибут" или "placeholder в html"!Что такое "placeholder" в html?
"Placeholder" - это один из атрибутов html.
Зачем нужен атрибут "placeholder" в html?
Атрибут "placeholder" в html нужен для создания "текста внутри" поля ввода(input или textarea)
Синтаксис атрибута "placeholder html"!
Если поле ввода textarea:
Если поле ввода input:
Пример вывода атрибута "placeholder html".
Выше вы видели синтаксис использования атрибута placeholder, теперь давайте этот код выведем прямо здесь:
Пример textarea и атрибута "placeholder".
Пример input и атрибута "placeholder".
Исключение для атрибута placeholder
Есть ли "исключение для атрибута placeholder"?
Одно из исключений поля ввода, где не работает "атрибут placeholder" - это type submit, для данного типа, value - будет исполнять(условно) роль placeholder
Пример исключения для атрибута placeholder
<input type="submit" value="Исключение placeholder в input">
Вывод исключения для атрибута placeholder
"Placeholder css" или placeholder псевдоэлемент"
Кроме того, что "placeholder" может быть атрибутом, но и "placeholder" может быть "псевдоэлементом"... хотя его поведение отличается от... например before - т.е. он не выводится отдельно от элемента, а он выводится внутри "поля ввода".
Синтаксис placeholder псевдоэлемент"
selector::placeholder {
property: value;
}
Зачем нужен псевдоэлемент placeholder"
"Псевдоэлемент placeholder" нужен для того, чтобы изменить свойства выводимого текста в поле ввода, например цвет.
Пример использования псевдоэлемента placeholder"
Html
<input class="example_placeholder" placeholder="Здесь текст внутри инпута">
Css
<style>
.example_placeholder::-webkit-input-placeholder {color:red ;;}
.example_placeholder::-moz-placeholder {color:red ;}
.example_placeholder:-moz-placeholder {color:red ;}
.example_placeholder:-ms-input-placeholder {color:red ;}
</style>
Вывод на экран псевдоэлемента placeholder"
Дополнительно о placeholder
Несколько дополнительных вопросов о placeholder, о которых делать страницу невозможно, и не сказать нельзя!
Css placeholder font size
Для того, чтобы изменить "font size" у placeholder вам понадобится - "font-size:"
Html
<input class="example_placeholder_2" placeholder="css placeholder font size">
Css
<style>
.example_placeholder_2::-webkit-input-placeholder {font-size: 20px;}
.example_placeholder_2::-moz-placeholder {font-size: 20px;}
.example_placeholder_2:-moz-placeholder {font-size: 20px;}
.example_placeholder_2:-ms-input-placeholder {font-size: 20px;}
</style>
Пример изменения font size у placeholder
Шрифт placeholder css
Для того, чтобы изменить "шрифт css у placeholder" вам понадобится - "font-family"
Html
<input class="example_placeholder_3" placeholder="css placeholder font size">
Css
<style>
.example_placeholder_3::-webkit-input-placeholder {font-family: fantasy;}
.example_placeholder_3::-moz-placeholder {font-family: fantasy;}
.example_placeholder_3:-moz-placeholder {font-family: fantasy;}
.example_placeholder_3:-ms-input-placeholder {font-family: fantasy;}
</style>
Пример изменения шрифта у placeholder
Placeholder image
placeholder image... эээ? Что это: "placeholder image"?
Атрибут placeholder добавляется только полям ввода.
Если я правильно понял, то вам нужен атрибут title