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
b1mind
b1mind2mo ago
Break it down into boxes in boxes To follow html semantics you would have
form
label
input <!--(or sibling with for="") -->
button
form
label
input <!--(or sibling with for="") -->
button
mehul
mehul2mo ago
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!
b1mind
b1mind2mo ago
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
mehul
mehul2mo ago
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).
No description
No description
ChooKing
ChooKing2mo ago
There are differences in margins, paddings, colors, and fonts. Adjust each individually.
mehul
mehul2mo ago
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)?
ChooKing
ChooKing2mo ago
Remove the margin and border.
MarkBoots
MarkBoots2mo ago
or make the form flex
mehul
mehul2mo ago
making them a flex item helped! thanks for your help everyone! 😀