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

Question

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

如果我的占位符是："Where (example: New York)"

<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 中不起作用，并且可能 不应该 在任何地方工作！此外，以这种方式设置占位符的样式被认为是错误的形式，因为它们并不是真正的表示元素，而只是告知用户预期内容的一种帮助。

一个更好的解决方案是除了给占位符一个 font/colour 以适合您的主题之外根本不设置占位符的样式。

参见：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>

Answer 2

你可能要思考占位符的作用和意义是什么。大多数 UI 专家同意：占位符不是标签。标签（如 "Search"）是标签，应该在文本区域之外。占位符被设计为样本输入或格式，而不是标签，也不是说明。在某种程度上，您以类似标签的方式使用占位符，一旦用户开始输入，该信息就会消失。

例如，在 phone 号码的输入字段中，标签为 "Phone Number"，占位符可能为“212-555-1234”。在您的情况下，"Search" 应该是标签，"brown fox" 应该是占位符。如果您想将整个占位符设为斜体（但为什么呢？），您可以使用占位符伪元素轻松做到这一点。

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

Styling part of the text in the placeholder

html

css

placeholder