Replies: 2 comments
-
In regards to your first two points, because there is no margin between the input fields they are right up against one another and what you see as a thick single border on the bottom of the first and second input fields is in fact two separate borders (the bottom border of one input and the top border of the next input). To solve this you can add some spacing (margin) between the inputs by adding the Concerning the shadow-outline color, I haven't really looked into it but I think you can change it. Concerning a better class to do the outline, out of the box I don't believe there is a better way to do it. Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
Thank you for your reply. I could insert inline style for "margin-bottom: -2px" so that the border overlap each other and it will appear as a single border. "-space-y-1" seems to be the closest match to margin-bottom: -2px, but the bottom of letters such as 'p' is touching the bottom border. The bottom borders of the first and second input element are still missing when in focus with '-space-y-1'. Only the last input field (in focus) has the complete blue border. Appreciate your help on this. |
Beta Was this translation helpful? Give feedback.
-
I have 3 input fields line up vertically.
Thank you.
https://codesandbox.io/s/shy-lake-lue6i?file=/index.html
Beta Was this translation helpful? Give feedback.
All reactions