使用 CSS 自动添加“必填字段”星号以形成输入

小编典典

使用 CSS 自动添加“必填字段”星号以形成输入

all

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

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

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

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

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

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

有没有什么好的解决方案具有不可能代码的全部或大部分优点？

阅读 58

2022-08-15

共1个答案

小编典典

你是这么想的吗？

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">

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-
elements

2022-08-15