Change Input Border when input is selected [RESOLVED]

Get Help
, , , ,
1

Hello everyone.

On my Gravity Forms, when you click an input to type into it, the input border changes to blue and has rounded corners.

I’d like it to change to #FF2200 and not round the corners.

I know how to target the input and change the border color, but not just when the input is selected.

Hope this makes sense, please help, thanks!

2

That is coming from the browser and isn’t actually changing the border of the element, rather it’s overlaying its own outline on top of the element when the input has focus. Different browsers will display this slightly differently, some around the element (Firefox) and some on top of it (Chrome).

To change this you’d need to target the input via the :focus selector and change the outline. Since there is no way to change the radius of the outline directly that I’m aware of, I’d recommend just setting a custom outline and offsetting it to be over the border of the input which should look consistent across most browsers.

body #gform_wrapper_2 .gform_body input[type=text]:focus {
	outline: 2px solid #FF2200;
	outline-offset: -2px;
}
2 Likes
3

Thank you! I changed the code slightly to make it work. And applied to all forms.

.gform_wrapper .gform_body input[type=text]:focus {
	outline: 2px solid #FF2200;
	outline-offset: -2px;
}