使用 CSS 自动为表单输入添加“必填字段”星号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11197671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use CSS to automatically add 'required field' asterisk to form inputs
提问by brentonstrine
What is a good way to overcome the unfortunate fact that this code will not work as desired:
什么是克服此代码无法按预期工作的不幸事实的好方法：
<div class="required">
<label>Name:</label>
<input type="text">
</div>
<style>
.required input:after { content:"*"; }
</style>
In a perfect world, all required inputs would get the little asterisk indicating that the field is required. This solution impossible since the CSS is inserted after the element content, not after the element itself, but something like it would be ideal. On a site with thousands of required fields, I can move the asterisk in front of the input with one change to one line (:afterto :before) or I can move it to the end of the label (.required label:after) or in front of the label, or to a position on the containing box, etc...
在一个完美的世界中，所有 required inputs 都会得到一个小星号，表明该字段是必需的。这个解决方案是不可能的，因为 CSS 是在元素内容之后插入的，而不是在元素本身之后，而是像这样的东西是理想的。在具有数千个必填字段的站点上，我可以将输入前面的星号移动到一行 ( :afterto :before) 或者我可以将其移动到标签的末尾 ( .required label:after) 或标签的前面，或者到包含框上的位置等...
This is important not just in case I change my mind about where to place the asterisk everywhere, but also for odd cases where the form layout doesn't allow the asterisk in the standard position. It also plays well with validation that checks the form or highlights improperly completed controls.
这很重要，不仅在我改变主意将星号放置在任何地方的情况下，而且对于表单布局不允许星号位于标准位置的奇怪情况。它也适用于检查表单或突出显示未正确完成的控件的验证。
Lastly, it doesn't add additional markup.
最后，它不会添加额外的标记。
Are there any good solutions that have all or most of the advantages of the impossible code?
是否有任何好的解决方案具有不可能代码的全部或大部分优点？
回答by Max Girkens
Is that what you had in mind?
那是你想的吗？
<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">See https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements
请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements
回答by laffuste
.required label {
font-weight: bold;
}
.required label:after {
color: #e32;
content: ' *';
display:inline;
}
Fiddle with your exact structure: http://jsfiddle.net/bQ859/
摆弄你的确切结构：http: //jsfiddle.net/bQ859/
回答by jaypeagi
尽管这是公认的答案，但请忽略我并使用:after下面建议的语法。我的解决方案无法访问。
A similar outcome could be achieved by using a background image of a picture of an asterisk and setting the background of the label/input/the outer div and a padding of the size of the asterisk image. Something like this:
通过使用星号图片的背景图像并设置标签/输入/外部 div 的背景和星号图像大小的填充，可以实现类似的结果。像这样的东西：
.required input {
padding-right: 25px;
background-image: url(...);
background-position: right top;
}
This will put the asterisk INSIDE the text box, but putting the same on div.requiredinstead of .required inputwill probably be more what you're looking for, if a little less elegant.
这会将星号放在文本框内，但如果稍微不那么优雅，那么将星号放在文本框中div.required而不是.required input可能会更符合您的要求。
This method doesn't require an additional input.
此方法不需要额外的输入。
回答by Tebe
To put it exactly INTO input as it is shown on the following image:
将其准确输入到输入中，如下图所示：
I found the following approach:
我找到了以下方法：
.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>
Site on which I work is coded using fixed layout so it was ok for me.
我工作的网站是使用固定布局编码的，所以对我来说没问题。
I'm not sure that that it's good for liquid design.
我不确定它是否适合流动设计。
回答by Kondal
write in CSS
用 CSS 写
.form-group.required .control-label:after {content:"*";color:red;}
and HTML
和 HTML
<div class="form-group required">
<label class="control-label">Name:</label>
<input type="text">
</div>
回答by faisal
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;
}
回答by Toolkit
input[required], select[required] {
background-image: url('/img/star.png');
background-repeat: no-repeat;
background-position-x: right;
}
Image has some 20px space on the right not to overlap with select dropdown arrow
图像右侧有一些 20px 的空间，不要与选择下拉箭头重叠
And it looks like this:
它看起来像这样：
回答by Falah
Use jQuery and CSS
使用 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>回答by user2903536
I think this is the efficient way to do, why so much headache
我认为这是有效的方法，为什么如此头疼
<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>
回答by Henry's Cat
It is 2019 and previous answers to this problem are not using
现在是 2019 年，以前对此问题的答案没有使用
- CSS grid
- CSS variables
- HTML5 form elements
- SVG in CSS
- CSS 网格
- CSS 变量
- HTML5 表单元素
- CSS 中的 SVG
CSS grid is the way to do forms in 2019 as you can have your labels preceding your inputs without having extra divs, spans, spans with asterisks in and other relics.
CSS 网格是 2019 年制作表单的方式，因为您可以将标签放在输入之前，而无需额外的 div、跨度、带星号的跨度和其他遗物。
Here is where we are going with minimal CSS:
这是我们使用最少 CSS 的地方：
The HTML for the above:
上面的 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>
Placeholder text can be added too and is highly recommended. (I am just answering this mid-form).
也可以添加占位符文本，强烈推荐。（我只是在回答这个中间形式）。
Now for the CSS variables:
现在对于 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>');
The CSS for the form elements:
表单元素的 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);
}
The form itself should be in CSS grid:
表单本身应该在 CSS 网格中：
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
The values for the columns can be set to 1fr autoor 1frwith anything such as <p>tags in the form set to span 1/-1. You change the variables in your media queries so that you have the input boxes going full width on mobile and as per above on desktop. You can also change your grid gap on mobile if you wish by using the CSS variables approach.
列的值可以设置为1fr auto或1fr使用任何内容，例如<p>设置为跨度 1/-1 的表单中的标签。您可以更改媒体查询中的变量，以便您的输入框在移动设备上和桌面上的输入框全宽。如果您愿意，您还可以使用 CSS 变量方法更改移动设备上的网格间隙。
When the boxes are valid then you should get a green tick instead of the asterisk.
当这些框有效时，您应该得到一个绿色的勾而不是星号。
The SVG in CSS is a way of saving the browser from having to do a round trip to the server to get an image of the asterisk. In this way you can fine tune the asterisks, the examples here are at an unusual angle, you can edit this out as the SVG icon above is entirely readable. The viewbox can also be amended to place the asterisk above or below the centre.
CSS 中的 SVG 是一种使浏览器不必往返服务器以获取星号图像的方法。通过这种方式你可以微调星号，这里的例子是在一个不寻常的角度，你可以编辑它，因为上面的 SVG 图标是完全可读的。也可以修改视图框以将星号放置在中心上方或下方。
