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

有什么好方法可以克服不幸的事实，即该代码无法按预期工作：

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

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

在理想情况下，所有必填项input都将带有一个小星号，表明该字段是必填项。这种解决方案是不可能的，因为CSS是在元素内容之后而不是元素本身之后插入的，但是像这样的东西是理想的。在具有数千个必填字段的站点上，我可以将星号移动到输入的前面，而只更改一行（:after到:before），也可以将其移动到标签的末尾（.required label:after）或标签的前面，或收纳盒上的位置等

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

最后，它不会添加其他标记。

是否有任何好的解决方案具有不可能的代码的全部或大部分优点？

那是你的想法吗？

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

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

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

虽然这是可接受的答案，但是请忽略我，并使用:after下面建议的语法。我的解决方案无法访问。

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

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

这将在星号框内放置星号，但如果不太优雅的话，将其放在div.required而不是.required input您想要的位置。

此方法不需要其他输入。

准确地将其放入下图所示的INTO输入中：

我发现以下方法：

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

我在其上工作的网站使用固定布局编码，因此对我来说还可以。

我不确定这是否适合液体设计。

用CSS编写

.form-group.required .control-label:after {content:"*";color:red;}

和HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

图片右侧有20px的空间，不与选择下拉箭头重叠

它看起来像这样：

使用jQuery和CSS

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

我认为这是有效的方法，为什么会如此头痛

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

是2019年，以前没有使用此问题的答案

1. CSS网格
2. CSS变量
3. HTML5表单元素
4. CSS中的SVG

CSS网格是在2019年制作表单的方法，因为您可以在输入之前添加标签，而无需额外的div，跨度，带星号的跨度和其他文物。

这是我们使用最少CSS的地方：

上面的HTML：

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

也可以添加占位符文本，强烈建议使用。（我只是在回答这个中间表格）。

现在获取CSS变量：

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

表单元素的CSS：

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

表单本身应位于CSS网格中：

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

列的值可以设置为1fr auto或1fr与之类的任何值<p>形式为跨度1 / -1的标签。您可以在媒体查询中更改变量，以使输入框在移动设备上和在台式机上均变为全角。如果愿意，还可以使用CSS变量方法来更改移动设备上的网格间距。

当这些框有效时，您应该得到一个绿色的勾号，而不是星号。

CSS中的SVG是一种节省浏览器的方法，而不必将其往返于服务器即可获得星号图像。这样，您可以微调星号，此处的示例处于不同角度，您可以对其进行编辑，因为上面的SVG图标是完全可读的。也可以修改视图框，以将星号放在中心上方或下方。

本示例在标签前面放置一个星号符号，以将特定输入表示为必填字段。我使用％和em设置CSS属性，以确保我的网页具有响应能力。如果需要，可以使用px或其他绝对单位。

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

您需要的是：required选择器-它会选择所有具有'required'属性的字段（因此无需添加任何其他类）。然后-根据您的需求设置输入样式。您可以使用'：after'选择器并以建议的方式在其他答案中添加星号

您可以通过将HTML代码封装在div标签（包含“ required”类和“ form-group”类）中的div标签中来实现所需的结果。

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

对于那些最终在这里使用jQuery的人：

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }