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

Question

有什么好方法可以克服这段代码不能按预期工作的不幸事实:

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

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

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

这一点非常重要,不仅仅是因为我改变了我的想法,无论在哪里放置星号,还要考虑表格布局不允许星号位于标准位置的奇怪情况.它也适用于检查表单或突出显示不正确完成的控件的验证.

最后,它不会添加额外的标记.

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

Answer 1

那是你的想法吗？

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

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

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

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

Answer 2

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

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

Answer 3

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

通过使用星号图片的背景图像并设置标签/输入/外部div的背景和星号图像大小的填充,可以实现类似的结果.像这样的东西:

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

这将把星号放在文本框的内部,但是如果不那么优雅,那么把它放在相同的位置div.required而不是.required input你想要的更多.

此方法不需要额外输入.

Answer 4

要将其完全放入INTO输入,如下图所示:

我找到了以下方法:

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

我工作的网站使用固定布局编码,所以对我来说没问题.

我不确定它对液体设计有好处.

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

Answer 6

这是我创建的一个简单的“仅 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 将以传统方式处理和转换它，即首先是标签，然后是输入。

Answer 7

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

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

它看起来像这样:

Answer 8

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

Answer 9

现在是 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 图标是完全可读的。也可以修改视图框以将星号放置在中心上方或下方。

Answer 10

2023年的解决方案：

将 * 添加到紧邻所需输入之前的任何标签：

label:has(+ input:required):after {
  content: ' *';
  color: red;
}

<label>label for optional</label>
<input>

<label>label for required</label>
<input required>

Answer 11

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

Answer 12

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

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