Question

我想在具有required属性的input元素中添加星号。并且在输入内部。

这就是我要做的事。

<input type="text" placeholder="name" class="text-input" required>

[required] {
  position: relative;
  color: red;
  padding: 10px;
}

[required]:after {
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
  content: " *";
  height: 10px;
  width: 10px;  
}

Demo

我不想添加更多元素或类，这是可能的。

看起来我不能这样做。

Answer 1

请注意，您无法在替换元素（如表单元素（输入）和图像元素）上使用:before和:after伪元素。

您可能希望将输入包装在父元素中，并将:after应用于此

Answer 2

在实践中，你不能。 CSS 2.1 spec说：“此规范未完全定义：替换元素之前和之后的交互（例如HTML中的IMG）。这将在未来的规范中更详细地定义。“到目前为止还没有定义。 input被视为替换元素。浏览器通常不支持:after和:before伪元素。如果他们这样做了，生成的内容将被插入到元素内容的结尾或开头，HTML内容是空的，因此根本不清楚可以发生什么。

请注意，使用没有关联的input元素的label元素会破坏基本的可用性和可访问性指南。特别是，placeholder属性并不是用来代替标签。

Answer 3

这里有一个添加星号的例子，但是在输入之后

http://jsfiddle.net/erqrN/1/

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required:after { content:" *"; }
</style>

您无法在输入中使用before和after;）

编辑：像那样：

    <input type="text" placeholder="Name *">

使用伪元素使用required属性为输入元素添加星号

3 个答案: