I'm working on the input style for a dropdown field, and I have two options for once a value has been selected. The default field state is shown at the top, which has the same border color as the empty state. The second option has a border the same color as the value. Which version communicates better?
Not sure I understand the question. Can you reformulate?– Ecaterina MoraruJan 8, 2018 at 14:13
I think this still qualifies as a UX question, because this is mostly an input state issue.– Wendy WojenkaJan 8, 2018 at 16:05
It qualifies now that it's been edited from its original state.– dennisleesJan 8, 2018 at 16:15
Consistency is at the center of good UI design
Unless there's a good reason to, the weight and color of the text and the thickness of the input border of a dropdown selector should be the same in all states.
In your case, graying out the text in the "no value" state risks the field being mistaken for one that is disabled, and increasing the thickness of the border could be distracting and increases the risk of technical issues with the layout of your form.
The age old aphorism applies here:
KISS (Keep it simple, stupid)
To me, option 1 is stronger, but your default empty state still suffers from its lack of contrast. It might be mistaken for a disabled state. I suggest making the text a bit darker.
Your second option gives the impression a bit too strongly that the input field is currently in focus. You should reserve border changes (color) to communicate errors and activity.
If you really want to make it obvious something has been selected, you can opt for a checkmark next or inside the input field. If you are worried that people will think it's pre-filled, you can make use of smart defaults.