I wanted to know how to achieve something similar to the CSS-Tricks search-bar above (top-right of the site).
I’d like to know how to:
- Achieve the shape of the search-bar
- Keep the "submit" button inside the search-bar
- In the search-bar it displays the word "Search…", once you click on the search-bar the word "Search…" disappears and allows you to type your search, how would one achieve this
I will briefly try and answer these for you. The search ‘box’ actually has no styling on it at all, it is contained within a div that has the background set to an image which is the shape that you see. The input box is then placed over the top with all background and borders removed, giving the effect that the div background belongs to the search box.
From the above, I can tell you that the search button is not inside the input box, but rather inside the same div
Not tested this code, but think it is about right. Someone else can correct me!