mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-28 11:49:44 +00:00
68 lines
1.6 KiB
HTML
68 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/required-optional-pseudoclass-ref.html" />
|
|
|
|
<style>
|
|
input:required {
|
|
border: 2px solid red;
|
|
}
|
|
|
|
input:optional {
|
|
border: 2px solid blue;
|
|
}
|
|
|
|
input:required+span {
|
|
color: green;
|
|
}
|
|
|
|
div>input:required {
|
|
border: 2px dashed red;
|
|
}
|
|
|
|
section input:optional {
|
|
border: 2px dashed blue;
|
|
}
|
|
|
|
input:required~label {
|
|
color: orange;
|
|
}
|
|
|
|
form:has(input:required) {
|
|
border: 2px solid purple;
|
|
}
|
|
</style>
|
|
|
|
<input type="text" required placeholder="Should be red"><span>Should be green</span>
|
|
<input type="text" placeholder="Should be blue">
|
|
|
|
<div>
|
|
<input type="text" required placeholder="Should be dashed red">
|
|
</div>
|
|
|
|
<section>
|
|
<div>
|
|
<input type="text" placeholder="Should be dashed blue">
|
|
</div>
|
|
</section>
|
|
|
|
<p>Other content</p>
|
|
<label>Should be orange</label>
|
|
|
|
<form>
|
|
<span>Purple border</span>
|
|
<input id="make-me-required" type="text" placeholder="Should be red">
|
|
</form>
|
|
<form>
|
|
<span>No border</span>
|
|
<input id="make-me-optional" type="text" required placeholder="Should be blue">
|
|
</form>
|
|
|
|
<!-- After the document has loaded, toggle the required-ness of the previous two inputs -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const makeMeOptional = document.getElementById("make-me-optional");
|
|
const makeMeRequired = document.getElementById("make-me-required");
|
|
|
|
makeMeOptional.required = false;
|
|
makeMeRequired.required = true;
|
|
});
|
|
</script>
|