CSS ::placeholder — стиль підказки в полі

HTML

<input type="text" placeholder="Синя підказка">

CSS

input[type="text"]::placeholder {
    color: blue;
}

HTML

<form class="f">
    <p class="field">
        <input id="mail" type="email" placeholder="[email protected]">
        <label for="mail">Електронна пошта</label>
    </p>
</form>

CSS

.f { font: 15px system-ui, sans-serif; }

.field {
    position: relative;
    max-width: 20rem;
}

.field input {
    width: 100%;
    padding: 1.1rem .6rem .4rem;
    border: 1px solid #94a3b8;
    border-radius: 6px;
}

.field label {
    position: absolute;
    left: .65rem;
    top: .2rem;
    font-size: .72rem;
    color: #2563eb;
    transition: .15s;
}

/* поки поле порожнє І не у фокусі — підпис опускається на місце підказки */
.field input:placeholder-shown:not(:focus) + label {
    top: .65rem;
    font-size: 1rem;
    color: #94a3b8;
}

/* підказку ховаємо, поки на її місці стоїть підпис: інакше два тексти
   накладаються один на одного */
.field input::placeholder {
    color: transparent;
}

.field input:focus::placeholder {
    color: #cbd5e1;
}