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

Posted 2023-02-22

技术标签:

【中文标题】使用 CSS 自动添加“必填字段”星号以形成输入【英文标题】：Use CSS to automatically add 'required field' asterisk to form inputs 【发布时间】：2012-06-27 04:48:50 【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

也许应用星号的背景图像？要使输入字段实际需要，请将required 属性添加到<input... developer.mozilla.org/en-US/docs/Web/html/Element/input/… 【参考方案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

【讨论】：

这在许多情况下都是一个很好的解决方案，但是如果使用绝对定位或浮动来排列表格（例如jsfiddle.net/erqrN/2），它就不起作用了。我实际上是使用绝对定位来排列我的表格。我完全可以定位*，但这意味着我必须手动输入表单输入的每个长度的距离，并且无法进行任何灵活的输入。 @brentonsrine 奇怪的是，您不应该使用绝对定位来排列表格。虽然常用，但绝对定位不是响应式的（除非您在调整大小时让 JS 修改 DOM），而使用静态或相对位置始终可以实现相同的效果，这在设计中可以是响应式的。读者请避免在诸如表单元素之类的东西上使用绝对定位等样式，因为这是一种相当陈旧的定位方法。我知道你的评论很老了，但这是给读者的。使用Lynx 时没有出现星号，这可能是可访问性问题。我可以把它放在我的 .css 中吗？如果是的话，你能举个例子吗？我不知道 : 语法 @LeonardoMaffei 当然，看看developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements & developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes【参考方案2】：

.required label 
    font-weight: bold;

.required label:after 
    color: #e32;
    content: ' *';
    display:inline;

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

【讨论】：

你的标签上仍然需要类，真正保持文档结构整洁的唯一方法是背景图像方法。虽然简洁。【参考方案3】：

如下图所示，准确地说是 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 的全部意义，不是吗？ span 不花钱，这是一个常见的技巧来简化我见过的大量库中经常发现的东西【参考方案4】：

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;

【讨论】：

为什么background-image 上有两个radial-gradient 术语？我无法让这种语法与developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient 结合，但是当我尝试它时它可以正常工作。这是首选，因为它不需要任何额外的标记来使其工作。不过，我希望看到一个使用 ::after 来获得更多可定制选项的解决方案。【参考方案5】：

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

【讨论】：

我认为你的方法只有在标签标签中分配控制标签类如<label class="control-label">...</label>时才有效。但它完成了工作（Y）我只给了你示例目的 control-label Mr.creep-story 这具有较旧的伪元素语法，而且不需要 div 汤。我添加了一个答案，使表单 div 和 class 免费。【参考方案6】：

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

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

它看起来像这样：

【讨论】：

这很鼓舞人心，看看我避免加载背景图像的方法。【参考方案7】：

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

CSS 网格 CSS 变量 HTML5 表单元素 CSS 中的 SVG

CSS 网格是 2019 年创建表单的方式，因为您可以在输入之前添加标签，而无需额外的 div、span、带星号的 span 和其他遗物。

这是我们使用最少 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"   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"   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 图标是完全可读的。也可以修改视图框以将星号置于中心上方或下方。

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

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

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

【讨论】：

注意跨度应用于标签标签而不是输入标签。如果应用到输入标签，红色星号会下降到下一行 - 这不是大多数开发人员想要的【参考方案10】：

这是我创建的一个简单的“CSS only”技巧，用于在 required 表单的标签上动态添加一个红色星号元素不会丢失浏览器的默认表单验证。

以下代码在所有浏览器和所有主要表单元素上都能完美运行。

.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 会以传统方式处理和转换它，即先标签后输入。

【讨论】：

【参考方案11】：

如果您使用“浮动标签”（如 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。

【讨论】：

【参考方案12】：

如果您在某个标签内有一个带有字段名称的标签，该标签具有必需的属性，则以角形式的常见场景会自动将此属性添加到必需的字段中

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

【讨论】：

【参考方案13】：

.asterisc 
  display: block;
  color: red;
  margin: -19px 185px;

<input style="width:200px">
<span class="asterisc">*</span>

【讨论】：

【参考方案14】：

此示例在标签前面放置一个星号，以将特定输入表示为必填字段。我使用 % 和 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>

【讨论】：

欢迎来到 SO！当你给出一个新观点的答案时，试着解释你的答案，而不是仅仅放置一个没有解释的代码。【参考方案15】：

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

【讨论】：

【参考方案16】：

可能有很多可能性。您可以反转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>

【讨论】：

【参考方案17】：

您可以通过将 HTML 代码封装在一个 div 标记中来实现所需的结果，该标记包含“required”类，后跟“form-group”类。*但是，这只有在您有 Bootstrap 时才有效。

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

【讨论】：

【参考方案18】：

简单而简短

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

.required 
    color: red;

【讨论】：

原帖要求答案是纯 CSS。在 HTML 中添加 * 可能意味着在许多表单中进行许多更改，而不仅仅是 CSS 中的一行。【参考方案19】：

对于那些最终来到这里但拥有 jQuery 的人：

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

// css
.red-star  color: red;

【讨论】：

如果不用js也能达到同样的效果，为什么还要用js呢？ @VitalyZdanevich 因为您需要使用该解决方案加载不必要的背景图像。另外，我已经有 js（很多其他人也会有）。

以上是关于使用 CSS 自动添加“必填字段”星号以形成输入的主要内容，如果未能解决你的问题，请参考以下文章

如何在 django 的表单中添加红色星号以显示必填字段？

如何在 WooCommerce 中更改必填字段星号颜色 [关闭]

在 Bootstrap 3 中为必填字段添加星号

如何在 jQuery Validate 中标记必填字段

在网络表单上突出显示必填字段的最佳方法是什么？

如何更改必填 * 字段中的星号颜色