Change Textarea Border on Focus

Click on this textarea:

Looks good?

Here’s how to do this:

Change the element :focus CSS styles. I suggest changing the outline rather than the border itself, because it may be important for users with accessibility limitations. It should look exactly the same, but it’s a better practice.

Code example:

<style>
    textarea:focus {
        outline: dashed 2px #86a0dd;
        box-shadow: 0 0 20px #86a0dd;
    }
</style>

<textarea></textarea>