Как сделать поднимающийся placeholder?

Чтобы создать поднимающийся placeholder для поля ввода, используйте следующий код CSS:

```css
/* Стили для поля ввода */
input {
border: none;
border-bottom: 2px solid #ccc;
outline: none;
font-size: 18px;
transition: border-color 0.3s;
padding: 10px 0;
background: transparent;
}

/* Стили для поднимающегося placeholder */
input:focus ~ label,
input:valid ~ label {
transform: translateY(-20px);
font-size: 14px;
color: #555;
pointer-events: none;
}

/* Стили для метки (label) */
label {
position: absolute;
top: 10px;
left: 0;
font-size: 18px;
color: #888;
transition: transform 0.3s, font-size 0.3s, color 0.3s;
}

/* Стили для активного поля ввода */
input:focus {
border-color: #555;
}
```

HTML-код для этой структуры выглядит следующим образом:

```html
<div class="input-container">
<input type="text" required>
<label>Имя</label>
</div>
```

Этот код создает поле ввода с эффектом поднимающегося placeholder:

1. Поле ввода и метка (label) размещены в обертке (`.input-container`).

2. При фокусировке на поле ввода (`input:focus`) или при наличии введенных данных (`input:valid`), метка (label) поднимается вверх и уменьшается в размере, а также изменяется цвет.

3. Свойство `pointer-events: none;` используется, чтобы метка (label) не мешала взаимодействию с полем ввода.

4. Эффект анимации достигается с помощью CSS-переходов (transitions).

Этот код позволяет создать эффект поднимающегося placeholder без необходимости использовать JavaScript.