Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #263493
    rashidhmoud
    Participant

    Hi,

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

    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.

    #263519
    Chris Coyier
    Keymaster

    Here’s a simple crack at it:

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

    #263534
    rashidhmoud
    Participant

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

    #263536
    Paulie_D
    Moderator

    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

    #263541
    Paulie_D
    Moderator

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

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

    #263573
    rashidhmoud
    Participant

    I’m glad that I have found this website!

    That was very helpful thank you guys!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design’ is closed to new topics and replies.