使用 CSS 自动在表单输入中添加“必填字段”星号

有什么好办法可以克服这一令人遗憾的事实:

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


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

在理想情况下，所有必需的 input都会得到一个小星号，表示该字段是必需的。这种解决方案是不可能的，因为 CSS 插入在元素内容之后，而不是在元素本身之后，但类似的东西将是理想的。在一个有数千个必填字段的网站上，我可以将星号移到输入前面的一行(:after到 :before) ，或者移到标签的末尾(.required label:after) ，或者移到标签的前面，或者移到包含框的某个位置，等等。.

这一点很重要，不仅是因为我改变了在任何地方放置星号的想法，还因为表单布局不允许在标准位置放置星号的奇怪情况。它还可以很好地用于检查窗体或突出显示不正确完成的控件的验证。

最后，它没有添加额外的标记。

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

459004 次浏览
小开
最佳答案

你是这么想的吗？

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/

小开

如下图所示，将其精确地输入到 INTO 输入中:

enter image description here

我发现了以下方法:

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

网站上，我的工作是使用固定的布局编码，所以它是为我好。

我不确定这对液体设计是否有好处。

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

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

enter image description here

它看起来像这样:enter image description here

小开 
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;
}
小开

您可以通过将 HTML 代码封装在 div 标记中来实现所需的结果，div 标记包含“必需”类和“ form-group”类。* 然而这只有在你有 Bootstrap 的情况下才有效。

<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; }
小开

使用 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>

小开 

.asterisc {
display: block;
color: red;
margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>

小开

我认为这是最有效的办法，为什么这么头疼

    <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>
小开

用 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>
小开

现在是2019年，以前对这个问题的回答都没有使用

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

CSS 网格是在2019年做表单的方式，因为你可以让你的标签在你的输入之前，而不需要额外的 div，span，星号的 span 和其他文物。

下面是我们使用最小化 CSS 的地方:

Example screenshot

以上的 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>标记的形式都可以设置为 span 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>

小开

你需要的是: 必需的选择器-它将选择所有的字段与’必需的’属性(所以不需要添加任何额外的类)。然后根据您的需要输入样式。您可以使用’: after’选择器，并按照建议的方式在其他答案中添加星号

小开

下面是我创建的一个简单的“ 只能用 CSS”技巧，我用它在 需要表单元素的标签上动态添加一个红色星号，而不会丢失浏览器的默认表单验证。

下面的代码可以在所有浏览器和所有主表单元素上完美工作。

.form-group {
display: flex;
flex-direction: column;
}


label {
order: 1;
text-transform: capitalize;
margin-bottom: 0.3em;
}


input,
select,
textarea {
padding: 0.5em;
order: 2;
}


input:required+label::after,
select:required+label::after,
textarea:required+label::after {
content: " *";
color: #e32;
}
<div class="form-group">
<input class="form-control" name="first_name" id="first_name" type="text" placeholder="First Name" required>
<label class="small mb-1" for="first_name">First Name</label>
</div>


<br>


<div class="form-group">
<input class="form-control" name="last_name" id="last_name" type="text" placeholder="Last Name">
<label class="small mb-1" for="last_name">Last Name</label>
</div>

重要提示: 必须首先保留输入元素和标签元素的顺序。CSS 会以传统的方式处理和转换它，标签第一，输入第二。

小开

简单明了

<label>Name:<span class="required">*</span></label>


.required {
color: red;
}
小开

如果你使用“浮动标签”(如 https://css-tricks.com/float-labels-css/或 https://dev.to/adrianbdesigns/let-s-create-a-floating-label-input-with-html-and-css-only-4mo8) ，那么你可以这样做:

input[required]+label:after {
content: '*';
color: red;
}

容易，没有图像，不会丢失在用户的眼睛。理论上，如果你想在标签和星号之间留一些间距，你也可以填充 :after。如果您愿意，也可以使用 :before代替 :after。

小开

如果您有一个标签，标签中的字段名称包含必需的属性，这是一个常见的角形场景，它会自动将这个属性添加到必需的字段中

[required] label::after {
content: '*';
font-size: 24px;
line-height: 0;
vertical-align: middle;
}
小开

可能性很多。您可以反转 flex-direction并使用 input的属性 required，如下所示:

fieldset {
border: none;
padding: 0;
display: flex;
flex-direction: column-reverse;
}
fieldset p {
margin-bottom: 4px;
}
fieldset input[required] ~ p:after {
content: '*';
color: red;
font-size: 12px;
margin-left: 4px;
}
<form>
<fieldset>
<input type="text" placeholder="Severus" name="first_name" required />
<p>First Name</p>
</fieldset>
<fieldset>
<input type="text" placeholder="Snape" name="last_name" />
<p>Last Name</p>
</fieldset>
</form>


提交答案