我正在编写一个
HTML表单,其中某些字段的必要性取决于其他字段的值,因此会动态更改.我想通过在每个必填字段之前的标签上添加星号来呈现该必要性的视觉提示.由于它是纯粹的可视化,并且相应标签中的必需属性很好地表达了情境的语义,我希望将星号添加为CSS定义中的内容,而不是直接或通过脚本将其插入HTML中.
然而,将视觉内容添加到必需字段之前的元素是具有挑战性的,因为CSS选择器组合器似乎向前(朝向儿童和兄弟姐妹)但不向后(朝向父母或以前的兄弟姐妹).
我当然可以在相同的代码中切换标签中的类名,我改变了输入字段的必要性,但是这会将内容添加与必要性更改分成两个不同的指令,我必须记住它们一起调用,现在和一年后,这是一个我想避免的约束;我更愿意切换输入字段的必要性,并让CSS对此更改作出反应而不需要我进一步参与.
所以我使用了反转每个标签及其输入字段的顺序,然后将它们包装在显示器中：flex; flex-direction：column-reverse元素,使标签文本在其相应的字段之前呈现,尽管在其之后声明.这样,我可以使用next-sibling combinator在每个必填字段的标签文本中添加星号：
label {
display:inline-flex;
flex-direction:column-reverse;
}
label>input[required]+span:after
{
content:"*";
color:#a21;
}
<label> <input type="text" required> <span>Field 1</span> </label> <label> <input type="text"> <span>Field 2</span> </label>
然而,我的问题是屏幕阅读器将如何解释双重反转(一次在HTML中,一次在CSS中).他们会在期待用户输入之前读出文本吗？
谢谢,我总是需要坐下来,安装一个屏幕阅读器并自己找出这些东西,但我似乎没有时间去做:-(
