[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?
cfpb/design-system-react#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. cfpb/design-system-react#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:

[natalia-fitzgerald]

@billhimmelsbach
This is related to the work that we have assigned for this sprint pulled from #800. Would you like to keep this ticket open or did you create a different one for this work?