使用CSS为输入字段的占位符设置样式

Question

是否可以在input字段的占位符属性中包含HTML效果？例如，以下是输入字段占位符的输出吗？

  

正常粗体

可以使用带::placeholder的CSS自定义占位符，但它适用于其中的所有文本。如何像HTML那样调整它？

Answer 1

我猜你可以创建一个＆＃34;占位符＆＃34;喜欢做你想做的事。像这样：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;