182 lines
4.6 KiB
HTML
182 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
/* Pack them to fit everything in 800*600 */
|
|
fieldset {
|
|
padding: 5px;
|
|
width: 100px;
|
|
float: left;
|
|
}
|
|
:valid {
|
|
background-color: green;
|
|
}
|
|
:not(:valid) {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test the styling with the pseudo class :valid with the <fieldset> element.</p>
|
|
|
|
<!-- Fieldset by itself. -->
|
|
<fieldset>Text</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs without any requirements. -->
|
|
<fieldset>
|
|
Text
|
|
<input>
|
|
<input value>
|
|
<input value="text">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs without any requirements. -->
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input>
|
|
<input value>
|
|
<input value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs with unsatisfied requirements. -->
|
|
<fieldset>
|
|
<input required>
|
|
<input required value>
|
|
<input required value="">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs with unsatisfied requirements. -->
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input required>
|
|
<input required value>
|
|
<input required value="">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs with satisfied requirements. -->
|
|
<fieldset>
|
|
<input required value="text">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs with satisfied requirements. -->
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs with a mix of satisfied and unsatisfied requirements. -->
|
|
<fieldset>
|
|
<input required>
|
|
<input required value>
|
|
<input required value="">
|
|
<input required value="text">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs with satisfied and unsatisfied requirements. -->
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input required>
|
|
<input required value>
|
|
<input required value="">
|
|
<input required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- The cases above repeated with multiple nested fieldset -->
|
|
<fieldset>
|
|
<div>
|
|
<fieldset>
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input>
|
|
<input value>
|
|
<input value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<div>
|
|
<fieldset>
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input required>
|
|
<input required value>
|
|
<input required value="">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<div>
|
|
<fieldset>
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<div>
|
|
<fieldset>
|
|
<fieldset>
|
|
Text
|
|
<div>
|
|
Text
|
|
<div>
|
|
Text
|
|
<input required>
|
|
<input required value>
|
|
<input required value="">
|
|
<input required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
</body>
|
|
</html>
|