css - 为占位符中的部分文本设置样式

Question

我想修改占位符的一部分的css样式。注意不是所有的占位符。

如果我的占位符是:“哪里(例如:纽约)”

<label>Search:</label>
<textarea placeholder="Where (example: New York)" required="required">
</textarea>

我能否将设置为斜体(例如:纽约)？

对于所有的占位符看here

Answer 1

是的(大概)...但我不推荐它。

在某些浏览器中，您可以在占位符和单独样式上使用:before 伪元素，但您必须制作'Search' 伪元素的前缀部分而不是实际的占位符属性:

::-webkit-input-placeholder {
   color: #ABABAB;
   font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
   color: #ABABAB;
   font-style: italic;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #ABABAB;
   font-style: italic;
}
:-ms-input-placeholder {  
   color: #ABABAB;
   font-style: italic;
}
/* prepend the 'Search' prefix */
::-webkit-input-placeholder:before {
    content: "Search ";
    font-style: normal;  
}
:-moz-placeholder:before {
    content: "Search ";
    font-style: normal;  
}
::-moz-placeholder:before {
    content: "Search ";
    font-style: normal;  
}
:-ms-input-placeholder:before {
    content: "Search ";
    font-style: normal;  
}

<textarea placeholder="(example: brown fox)" required="required"></textarea>

在 Chrome 中为我工作，但你的里程可能会有所不同。我已经添加了供应商前缀以防万一，但我没有在其他任何地方测试过它。如评论中所述 - 它在 Firefox 中不起作用，并且可能不应该在任何地方工作!此外，以这种方式设置占位符的样式被认为是错误的形式，因为它们并不是真正的表示元素，而只是告知用户预期内容的帮助。

更好的解决方案是除了为占位符提供适合您的主题的字体/颜色外，根本不设置占位符的样式。

参见:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder .

一个好的表单会结合使用label、placeholder 和title 来清楚地描述预期的输入。当您尝试提交无效的必填字段时，现代浏览器还将在必填字段对话框中使用 title 属性的值。试试这个例子:

<form>
    <label>Search:
        <input name="searchterms" 
               type="search" 
               placeholder="keyword/s" 
               required="required" 
               title="Space-separated keywords only" />
    </label>
    <input type="submit" value="go" />
</form>