使用 CSS 自动向表单输入框添加“必填字段”星号。

19 浏览
0 Comments

使用 CSS 自动向表单输入框添加“必填字段”星号。

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

 

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

这不仅仅对于我改变关于星号放置位置的想法很重要，而且对于表单布局不允许星号在标准位置的奇怪情况也很重要。它还可以与检查表单或突出显示未正确填写的控件的验证很好的配合。

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

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

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments 

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

调整您的结构: http://jsfiddle.net/bQ859/

0
0 Comments

这符合你的想法吗？

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






.required:after {
  content:" *";
  color: red;
}

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

0