Question

我想修改占位符的css样式。注意并非所有占位符。

如果我的占位符是：＆＃34;其中（例如：纽约）＆＃34;

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

我可以设置为斜体（例如：纽约）吗？

对于所有占位符外观here

Answer 1

是（ish）......但我不推荐它。

在某些浏览器中，您可以单独使用占位符和样式上的:before伪元素，但您必须进行＆＃39;搜索＆＃ 39; 前缀为伪元素的一部分而不是实际的占位符属性：

＆＃13;

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

＆＃13;

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

＆＃13;

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

更好的解决方案是不要为占位符添加样式，除了为它们提供适合您主题的字体/颜色。

请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder。

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

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可能想要考虑占位符的作用和含义。大多数UI专家都同意：占位符是不标签。标签（如“搜索”）是标签，应位于文本区域之外。占位符旨在作为样本输入，或格式，而不是标签，也不是说明。如果您以类似标签的方式使用占位符，那么一旦用户开始输入，该信息就会消失。

例如，在电话号码的输入字段中，标签为“电话号码”，占位符可能为“212-555-1234”。在您的情况下，“搜索”应该是标签，“棕色狐狸”应该是占位符。如果你想让整个占位符斜体（但为什么？），你可以使用占位符伪元素轻松地做到这一点。

在占位符中设置文本的一部分

2 个答案: