[Point of Contact] State Selector - Error/Hover/Focus styling updates

[shindigira]

Changes needed

• Have the outline/border not be covered by the droparrow box
• Need design of hover and focus with and without an error state.

In this screenshot: First element is a regular input -- red borders -- but hover is overriding the red borders Second element is a select input -- red borders -- but hover is partially covering the red borders and with a different blue color

[natalia-fitzgerald]

@shindigira I made a ticket for making hover and focus more consistent across inputs. If we were to use the default hover and focus styling (Pacific blue) for the select and only used the status color when enabled (not for hover and focus) would this simplify the implementation? https://github.com/cfpb/design-system-react/issues/357

The select in the DSR and here should not include the "--select an option--" text by default. Helper text should be placed under the label and outside of the input field.

[natalia-fitzgerald]

@shindigira This is a related ticket. https://github.com/cfpb/design-system-react/issues/357

In the meantime, if you'd like to move forward (locally) with the styling for the input and select, here's the styling:

• Hover: 2px solid Pacific border (#0072ce)
• Focus: 1px dotted Pacific (#0072ce) outline on focus

Ultimately I'd like to make the more comprehensive change at the DS level but I know we're up against beta launch so perhaps handling locally is the only option.

[natalia-fitzgerald]

@shindigira I reviewed this on AWS and I'm still seeing the red show through on hover and focus.

[natalia-fitzgerald]

@shindigira The error state styling should look like this: