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