:placeholder-shown
==================

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS псевдокласс **`:placeholder-shown`** представляет любой `<input>` или `<textarea>` (en-US) элемент, который отображает в данный момент текст заполнитель (плейсхолдер).


```css
/\* Выбирает любой элемент с активным плейсхолдером \*/
:placeholder-shown {
  border: 2px solid silver;
}
```

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

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

#### HTML


```html
<input placeholder="Type something here!" />
```


#### CSS
```

input:-ms-input-placeholder {
  border-color: silver;
}

input:-moz-placeholder {
  border-color: silver;
}
```



```css
input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}
```


#### Результат

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

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

#### HTML


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


#### CSS
```

input:-ms-input-placeholder {
  text-overflow: ellipsis;
}

input:-moz-placeholder {
  text-overflow: ellipsis;
}
```



```css
input:placeholder-shown {
  text-overflow: ellipsis;
}
```


#### Результат

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

#### HTML


```html
<input placeholder="Type something here!" />
```


#### CSS
```

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

input:-moz-placeholder {
  color: red;
  font-style: italic;
}
```



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


#### Результат

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

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

#### HTML


```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.studentid:-ms-input-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}

input.studentid:-moz-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```



```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```


#### Результат

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

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Псевдоэлемент `::placeholder`, применяющий стили к *самому себе*.
* Связанные HTML-элементы: `<input>`, `<textarea>` (en-US)
* HTML формы