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"

FFaker Hello guys, sorry to disturb you all; can someone explain how I should proceed t...

b1mind•10/9/24, 6:20 PM

you don't you do what you did and faux it

snxxwyy•10/9/24, 6:21 PM

wrap the icon and the input in a div and use either flex or grid to place them next to eachother.

b1mind•10/9/24, 6:21 PM

just make the boarders of the inputs go away and style the parent

FakerOP•10/9/24, 6:37 PM

oh okay I see, like a parent enclosing both input and icon, then put the border of the input transparent ?

b1mind•10/9/24, 6:38 PM

i'd do none vs transparent but ya

b1mind•10/9/24, 6:38 PM

also if you remove the outline make sure you add it back to the parent

FakerOP•10/9/24, 6:38 PM

yep got it, thanks !

Bb1mind i'd do none vs transparent but ya

FakerOP•10/9/24, 6:39 PM

is there a reason for using none instead of transparent ?

b1mind•10/9/24, 6:39 PM

Yes because transparent means the border is still there

b1mind•10/9/24, 6:39 PM

the size of it

b1mind•10/9/24, 6:39 PM

https://codepen.io/b1mind/pen/XWvNjyJ

Bb1mind Yes because transparent means the border is still there

FakerOP•10/9/24, 7:56 PM

hmm this can create issues when it come to padding for eg? Visually both options seems to have same effect

FFaker hmm this can create issues when it come to padding for eg? Visually both option...

b1mind•10/9/24, 8:08 PM

that is only visually and yes it would take up the space so you would have 1px (or w/e) around it

FakerOP•10/9/24, 8:08 PM

yep I see, thanks !!

b1mind•10/9/24, 8:10 PM

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.

b1mind•10/9/24, 8:10 PM

That way you don't cause shifting

FakerOP•10/9/24, 8:13 PM

yep I see... yeah always good to know the difference, it's always helpful