How to Style Invalid Inputs in CSS

<!-- 📗 This will make the background of the input green -->
<style>
    input:in-range {
        background-color: green;
    }
</style>

<input type="number" min="1" max="10" value="5" />

<!-- 📕 This will make the background of the input red -->
<style>
    input:out-of-range {
        background-color: red;
        border: 2px solid red;
    }
</style>

<input type="number" min="1" max="10" value="12" />