Any helpful resources for styling a search bar with an adjacent search button?
I'm still pretty early in my web dev journey but one thing I keep struggling with is styling a search bar with a button (either within a navigation bar or just in general) . I've tried looking at other people's CodePen's but I feel like I'm just copying and pasting and not learning how to do it myself. I'd appreciate any tutorials, tips, or any other resource that would be helpful regarding this topic. Thanks!
9 Replies
Break it down into boxes in boxes
To follow html semantics you would have
Will definitely keep this in mind but I was looking for help on how to style the search bar (using CSS). Sorry, maybe I should've been more clear but regardless, thanks for your input!
Right but I have a feeling you are confused and trying to add the button(🔍icon) to the input yes?
Sorry for the assumption but yes you are still not real clear on what is needed.
My point is you have proper semantic form/input/button then style those
If you have an example its best
here's an example of what I'm talking about (first image) and here's a photo of what I'm currently working with (second image). I know the html behind the search bar and the button but I'm struggling with styling both the search bar and button to something like this (or just styling in general).
There are differences in margins, paddings, colors, and fonts. Adjust each individually.
Do you have any tips or suggestions on how to combine both the search bar and button to make it all one fluid item (just like the first screenshot)?
Remove the margin and border.
or make the form flex
making them a flex item helped! thanks for your help everyone! 😀