When reviewing the Bootstrap 5.2 validation documentation,
https://getbootstrap.com/docs/5.2/forms/validation/
"It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not exposed to assistive technologies. While we are actively working on a solution for this issue, in the meantime, we suggest either utilizing the server-side option or sticking with the default browser validation method.",
I've been exploring other methods to apply styling to invalid input fields with a red border. I attempted the HTML5 approach but have been unsuccessful in getting a red border to show up. In the past, it was straightforward to achieve this using Bootstrap 3.3.7, but now, after years have passed, I am struggling to make it work with Bootstrap 5.2 (or any framework).
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Favorite fruit with required attribute</title>
<style>
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
input:invalid:required {
background-color: #d2d2d2;
}
</style>
</head>
<body>
<form>
<div>
<label for="choose1">What is your favorite color?</label>
<input id="choose1" required>
</div>
<div>
<label for="choose2">What is your favorite breakfast food?</label>
<input id="choose2" required>
</div>
<button>Submit</button>
</form>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Favorite fruit with required attribute</title>
<style>
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
input:invalid:required {
background-color: #d2d2d2;
}
</style>
</head>
<body>
<form>
<div>
<label for="choose1">What is your favorite color?</label>
<input id="choose1" required>
</div>
<div>
<label for="choose2">What is your favorite breakfast food?</label>
<input id="choose2" required>
</div>
<button>Submit</button>
</form>
</body>
</html>