From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../ru/web/css/_colon_placeholder-shown/index.html | 194 +++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 files/ru/web/css/_colon_placeholder-shown/index.html (limited to 'files/ru/web/css/_colon_placeholder-shown/index.html') diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..81ab4ab3fc --- /dev/null +++ b/files/ru/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,194 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
CSS псевдо-класс :placeholder-shown представляет любой {{htmlElement("input")}} или {{htmlElement("textarea")}} элемент, который отображает в данный момент текст заполнитель (плейсхолдер).
+ +
/* Выбирает любой элемент с активным плейсхолдером */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Простой пример

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ + + +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Простой_пример", 200, 60)}}

+ +

Переполнение текстом

+ +

На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства {{cssxref("text-overflow")}}.

+ +

HTML

+ +
<input placeholder="Enter something into this field, if you please!">
+ +

CSS

+ + + +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Переполнение_текстом", 200, 60)}}

+ +

Цветной текст

+ +

HTML

+ +
<input placeholder="Type something here!">
+
+ +

CSS

+ + + +
input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Цветной_текст", 200, 60)}}

+ +

Кастомизированное поле ввода

+ +

В следующем примере выделены поля Branch и ID с пользовательским стилем.

+ +

HTML

+ +
<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+ +

CSS

+ + + +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Кастомизированное_поле_ввода", 200, 180)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf