CSS伪类：required不能与伪元素:: before一起使用
[英]CSS pseudo-class :required does not work together with pseudo-element ::before
问题描述
我的意图是在必填字段的标签上加一个*。
我正在使用Chrome 47，Firefox 43和Opera 34进行测试。这些都无法理解CSS选择器
span:required::before
根据http://caniuse.com/#feat=form-validation的介绍，他们都应该能够理解它，如果您使用
span:hover::before
相反，它实际上有效。 我做错了什么？ 这是我的代码：
<!DOCTYPE HTML> <html> <head> <style type="text/css"> span::before { content: "\\00A0"; } span:required::before { /* This does NOT work! */ content: "*"; } span:hover::before { /* But this DOES work! */ content: "_"; } </style> </head> <body> <form> <p> <span required>Name</span> <input id="name" type="text" /> </p> <p> <span>Date of Birth</span> <input id="birth" type="text" /> </p> </form> </body> </html>
2 个解决方案
解决方案1
4 已采纳 2015-12-20 16:05:10
两个问题：
表单标签有一个专用元素
label。 您应该使用它，而不是span。的
required属性仅适用于控件本身，即，input，select，textarea等。span只是纯文本（和标签基本上是其自身），并且required属性使得这种元件上没有意义的。 1
如果要为必需输入的标签设置样式，则需要给它一个类名。
不过，这与:required::before无关，鉴于大多数表单元素都是替换元素，因此不太可能同时找到该伪类和该伪元素。
尽管有 1个 contenteditable仍可编辑。
解决方案2
0 2015-12-20 17:11:18
required属性必须在表单控件中，并且应该使用label而不是span 。
然后，您可以使用选择器:required + label::before 。 为了使其正常工作，表单控件必须按DOM顺序出现在标签之前，但是您可以使用float或flexbox重新排列。
p { overflow: hidden; } label { float: left; } label::before { content: "\\00A0"; font-family: monospace; } :required + label::before { content: "*"; }
<form> <p> <input id="name" type="text" required /> <label for="name">Name</label> </p> <p> <input id="birth" type="text" /> <label for="birth">Date of Birth</label> </p> </form>
CSS 伪元素“::Before”不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.