使用CSS自动添加所需字段星号以形成输入

Question

克服此代码无法按预期工作这一不幸事实的好方法是：

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

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

在一个完美的世界中，所有必需的输入将得到一个小星号，表示该字段是必需的。这个解决方案是不可能的，因为CSS是在元素内容之后插入的，而不是在元素本身之后插入的，但是类似的东西是理想的。在一个有数千个必填字段的站点上，我可以将输入前面的星号移动到一行（：after到：before），或者我可以将其移动到标签的末尾（。required label:after）或标签前面，或者移动到包含框上的位置，等等。。。

这一点很重要，不仅是为了防止我改变主意将星号放在何处，而且对于表单布局不允许星号位于标准位置的奇怪情况也很重要。它还可以用于检查表单或突出显示未正确完成的控件的验证。

最后，它不会添加额外的标记。

有没有什么好的解决方案能够充分利用不可能实现的代码的所有或大部分优点？




Answer 1

虽然这是公认的答案，但请忽略我，使用下面建议的：after语法。我的解决方案无法访问。

通过使用星号图片的背景图像并设置标签/输入/外部div的背景和星号图像大小的填充，可以实现类似的结果。大概是这样的：

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

这将把星号放在文本框内，但将星号放在div.required而不是上。所需的输入可能会更符合您的要求，即使有点不够优雅。

此方法不需要额外的输入。

Answer 2

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

摆弄你的确切结构：http://jsfiddle.net/bQ859/

Answer 3

这就是你想要的吗？

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

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

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

.required:after {
  content:" *";
  color: red;
}

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