Refactor: remove input border on focus

[JoshuaHungDinh]

Resolves GIVE-637

Description

This PR removes the default border on all inputs for all templates while the input is selected. While selected we have another style that outlines these inputs with the primary color chosen on the form, if the original border is not removed it can still visible resulting in two colored borders. As seen below.

Reference: https://lw.slack.com/archives/C04SLRDD9CK/p1712671026808389

Affects

styling of the VFB input fields on all templates

Visuals

Screen.Recording.2024-04-09.at.1.10.53.PM.mov

Testing Instructions

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[pauloiankoski]

When you completely remove the border, the element moves slightly. You might notice it "blinking".

What do you think about changing the border color instead of removing it, like in:

border-color: var(--form-element-focus-color);

[JoshuaHungDinh]

@pauloiankoski Nice catch, it looked it little to different to me while changing the border-color. Are you good with me making it transparent instead of removing it? It will solve the blinking issue. 7baec5c

[pauloiankoski]

Well, that's not a technical question. @jdghinson would you mind to give your input here? In short, the question is: should we turn the current border "green" or transparent on focus. Additionally to it, the traditional box-shadow will also be displayed. Whatever "The Boss" answers, I'm cool with!

Transparent	Colored

[jdghinson]

@pauloiankoski The transparent looks cleaner

Cc: @JoshuaHungDinh

[rickalday]

Passed manual QA tests.