Styling a sign in form
Hello guys, sorry to disturb you all; can someone explain how I should proceed to make the icons appear in the text area of my inputs please, like the little icons are part of the "rectangles"
12 Replies
you don't you do what you did and faux it
wrap the icon and the input in a div and use either flex or grid to place them next to eachother.
just make the boarders of the inputs go away and style the parent
oh okay I see, like a parent enclosing both input and icon, then put the border of the input transparent ?
i'd do none vs transparent but ya
also if you remove the outline make sure you add it back to the parent
yep got it, thanks !
is there a reason for using none instead of transparent ?
Yes because transparent means the border is still there
the size of it
https://codepen.io/b1mind/pen/XWvNjyJ
hmm this can create issues when it come to padding for eg? Visually both options seems to have same effect
that is only visually and yes it would take up the space so you would have 1px (or w/e) around it
yep I see, thanks !!
Which you will want sometimes just pointing out the difference 🙂 like if you have a button with border vs outline hovers you would use transparent for non hover state i.e.
That way you don't cause shifting
yep I see... yeah always good to know the difference, it's always helpful 👍