JSFiddle - React, Tailwind, and code Playground

by Adrià Vilanova Martínez

HTML

<form action="http://example.com">
    <input type="number" min="1" max="10" step="0.5" list="possibleanswers" name="num" required>
    <datalist id="possibleanswers">
        <option value="9">Solución 1</option>
        <option value="5.5">Solución 2</option>
    </datalist>
    <input type="submit">
</form>

CSS

input[type="number"] {
    width: 100px;
}

input[type="number"]:valid {
    border: solid 1px green;
    outline-color: green;
}

input[type="number"]:invalid {
    border: solid 1px red;
    outline-color: red;
}