html - 在HTML占位符中斜体化单个单词

我想用斜体将HTML占位符属性中的单个单词。我已经尝试过使用css样式设置<i></i>和<span>，但是它们都只接受纯文本，因此都无效，对吗？

到目前为止，从我的Google搜索中，唯一的解决方案是使用CSS斜体显示整个内容，但我需要格式化一个单词。

如果有人可以提供帮助，我将非常感谢。

最佳答案

替代答案：将段落用作占位符，将其绝对放置在也包含输入的div包装器中。重要的是要明确地相对定位包装器。该段必须没有指针事件。在这里，我使用必需的输入属性，以及:valid和:invalid伪类来知道何时隐藏占位符，这有点太过分了，可能无法按照您的期望进行操作。

HTML：

<input placeholder="This is a placeholder"/>
<br />
<div class="italics">
  <input required />
  <p class="specific">Now <i>THIS</i> is a placeholder</p>
</div>

CSS：

.italics {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: relative;

}

.italics input[value=""] {
  display: none;
}

.italics input:valid + p {
  display: none;
}

.italics input:invalid + p {
  display: inline !important;
  margin: 0;
  position: absolute;
  top: 5px;
  left: 2px;
  font-size: 0.6em;
  color: gray;
  font-family: sans-serif;
  pointer-events: none;
}

https://codepen.io/differentsmoke/pen/KezLdj