什么是克服此代码无法按预期工作的不幸事实的好方法:
<div class="required"> <label>Name:</label> <input type="text"> </div> <style> .required input:after { content:"*"; } </style>
在一个完美的世界中,所有 required inputs 都会得到一个小星号,表示该字段是必需的。这个解决方案是不可能的,因为 CSS 是在元素内容之后插入的,而不是在元素本身之后,但类似的东西是理想的。在具有数千个必填字段的站点上,我可以将输入前面的星号移动到一行 ( :afterto :before),或者我可以将其移动到标签的末尾 ( .required label:after) 或标签前面,或者容器上的位置等…
input
:after
:before
.required label:after
这一点很重要,不仅以防我改变了将星号放置在何处的想法,而且对于表单布局不允许星号位于标准位置的奇怪情况也是如此。它还可以很好地用于检查表单或突出显示未正确完成的控件的验证。
最后,它不会添加额外的标记。
有没有什么好的解决方案具有不可能代码的全部或大部分优点?
你是这么想的吗?
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