Add icon inside search bar using flexbox

[rashidhmoud]

Hi,

As the title says. I want to add a search icon inside the search bar but using FLEXBOX!
Here is an example:

Can someone show me how to do it?

Here is my code:

https://codepen.io/rashidhmoud/pen/rYgGBr

I only want to learn how to add the icon inside the bar using flexbox.

Thanks.

[Chris Coyier]

Here’s a simple crack at it:

https://codepen.io/chriscoyier/pen/bYyvvz

[rashidhmoud]

No thats not what I’m looking for!
I want to use flexbox only without using position property.

[Paulie_D]

I want to use flexbox only without using position property.

Flexbox can’t layer elements like you seem to require only lay them out in 2 dimensions and input element can’t have children so flexbox wouldn’t be useful there.

In fact, Chris’ demo doesn’t need the position property..it works fine without it.

https://codepen.io/Paulie-D/pen/rYgXym

[Paulie_D]

You can do it without position using CSS Grid (just for fun)

https://codepen.io/Paulie-D/pen/NwZGqz

[rashidhmoud]

I’m glad that I have found this website!

That was very helpful thank you guys!

[Author]

Posts