Change input border on focus

When someone clicks the input, it’s focused.

We may want to somehow show the user it’s clicked.

We can do this with CSS’s border and outline attributes.

Example:

<style>
    input:focus {
        border: 1px dashed green;
        outline: 1px dashed green;
    }
</style>

<input type="text">

Output (click on the input):