Customizing An Element's Outline Style
The default outline style is very limited. For example, you can't give an outline a border radius. Using box shadow and border is a way to make a styled outline.
First thing you need to do is remove the css outline property with `outline: none;`
I started by using the border css property to create a custom outline. This was the obvious choice since the outline in the design looked exactly like a border. Here's the image of an input field in focus and its default state.
Using border worked for me because the input fields are a set height. Let me explain... the outline border is 2px wide and the default border is 1px wide. Borders add space to an element, so the input field with the outline will end up being 1px larger than the default input. Usually this difference in size would cause the input to look like it was glitchy when it went in and out of focus, but since I set a fixed height the input didn't move.
If you're in a situation where you cannot use border because of this size difference issue, try using box shadow instead.
Using Box Shadow
Here's an example of what using box shadow can look like. Here I'm using the value `box-shadow: 0 0 0 2pt #2f80ed;` to create a solid line. You can see that it doesn't look like a border, but it also doesn't take up any additional space. You can also style it to make it look like it's glowing.
Then add a `transition: box-shadow 0.3s` to make it look like the outline is growing on focus.