Стилизация заполнителя поля ввода с помощью CSS

Question

Возможно ли иметь HTML-эффекты в атрибуте-заполнителе поля input?Например, может ли следующий текст быть заполнителем поля ввода?

обычный полужирный

Заполнитель можно настроить с помощью CSS с помощью ::placeholder но это относится ко всему тексту внутри него.Как настроить его как HTML?

Answer 1

Я думаю, вы можете создать эффект, подобный заполнителю, чтобы делать то, что вы хотите.Как это:

.inputBox {
  position: relative;
  display: inline-block;
}

.placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

.inputBox input:focus+.placeholder {
  display: none;
}

.inputBox input:valid+.placeholder {
  display: none;
}

<div class="inputBox">
  <input type="text" required />
  <div class="placeholder"><span style="font-weight: bold">Bold</span> <span>Text</span><!-- your html here --></div>
</div>