Question

当我为::after元素应用<p>时，它工作正常，但当我将其用于输入字段上的::placeholder伪元素时，它不起作用：

p::after {
  content: "*";
  color: red;
}

#registerFirstName::placeholder::after {
  content: "*";
  color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">

    <p>I live in Ducksburg</p>
  </body>
</html>

输出：

有人可以帮我解决这个问题吗？

Answer 1

：在Internet Explorer 7及以下的任何元素上都不支持after和：before。

它也不适用于替换元素，如表单元素（输入）和图像元素。

换句话说，使用纯CSS是不可能的。

但是如果使用jquery，你可以使用

$(".mystyle").after("add your smiley here");

Answer 2

Psuedo元素不适用于<input>等空元素。

Answer 3

您的代码存在两个问题。

首先，伪元素只能为元素设置。不适用于其他伪元素。

其次，正如其他人已经提到的那样，生成的内容伪元素（::before和::after）不应该在空元素上工作（那些在标记中的开始和结束标记之间没有内容的元素）而通常他们没有（有一些例外，但是，IIRC，唯一允许<input>使用这些伪元素的浏览器是Opera with Presto引擎。）

因此，要以跨浏览器的方式添加星号，您需要一个额外的元素。例如，您可以执行以下操作：

/* selecting spans immediately following anything with the "placeholder" attribute */
[placeholder] + span::after{
    content:"*";
    color: red;
}

        <input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
        <span></span>

UPD：对不起，我错过了星号应该首先位于占位符文本旁边的部分。不幸的是，使用CSS是不可能的。但是您可以使用占位符的the floating label pattern 而不是，这样就可以使用::after伪元素在所需位置添加星号，还可以提高表单的可访问性与裸占位符解决方案相比。

:: placeholder :: after在CSS中不起作用

3 个答案: