I need to redesing a form containing several questions and for visibility concerns I'd like to use for each question a box as defined in [1].
While doing this, I noticed that some inputs had no 'margin-top' as the css rule 'form > + ' does not apply.
I created a small page [2] reusing the sample given in [3].
The first example reuse the original test, the input elements have a 'margin-top' rule
The secong example shows the same test within an extra div element containing the class 'l-box', the input elements have no 'margin-top' rule
I found a go-round by using the class 'field-group' along with the class 'l-box' on the extra div, this class acts as the rule 'form > + ' and gives the expected result, see third example.
It would be better if all input elements of a form had the same 'margin-top' regardless of their postion in the structure, ie even if they are not a direct child of the form element
I need to redesing a form containing several questions and for visibility concerns I'd like to use for each question a box as defined in [1]. While doing this, I noticed that some inputs had no 'margin-top' as the css rule 'form > + ' does not apply. I created a small page [2] reusing the sample given in [3].
The first example reuse the original test, the input elements have a 'margin-top' rule The secong example shows the same test within an extra div element containing the class 'l-box', the input elements have no 'margin-top' rule I found a go-round by using the class 'field-group' along with the class 'l-box' on the extra div, this class acts as the rule 'form > + ' and gives the expected result, see third example.
It would be better if all input elements of a form had the same 'margin-top' regardless of their postion in the structure, ie even if they are not a direct child of the form element
[1] https://design-system.w3.org/layouts/box.html#default-box
[2] https://w3c.github.io/wbs-design/html/report-1.html
[3] https://design-system.w3.org/styles/forms.html#dealing-with-dates-and-times