将 HTML 占位符中的单个单词设置为斜体

Question

我想在 HTML 占位符属性中斜体化单个单词。我已经尝试过使用 css 样式<i></i>和<span>，但都不起作用，因为它只接受明文，对吧？

到目前为止，从我的谷歌搜索来看，唯一的解决方案是使用 CSS 将整个事情斜体化，但我需要格式化一个单词。

如果有人能提供帮助，我将不胜感激。

Answer 1

我想你可以使用UNICODE斜体字符(https://unicode-search.net/unicode-namesearch.pl?term=italic(来解决这个问题。

这应该是一个完整的小写集(对于英语(abcdefghijklmnopqrstuvwxyz 。不过，您将仅限于衬线字体。

我相信除此之外的任何事情都需要一些黑客攻击。

Answer 2

替代答案：您使用段落作为占位符，绝对位于也包含输入的div 包装器中。相对显式定位包装器很重要。段落不得包含指针事件。在这里，我使用所需的 input 属性以及: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