Web Design Tidbits #5: Twitter search form

In a series of blog posts, we’ll discuss web design’s best practices when it comes to usability, responsiveness and accessibility. We care about great design and we’d love to show you that a little CSS love goes a long way. In this post I’ll look at the Twitter search form, to replicate its elegant design.

Recreating the Twitter search form

Now Twitter wraps it’s elements in a whole lot of divs and spans. I’ll drill it down to the input-element and button, to keep things accessible. Using only HTML, our search form looks a bit ‘boxy’.

If you like this article, give it some sharing ❤️

Next we’ll write the style sheet to display a nice search form with rounded corners, that reminds me somewhat of a submarine. The button-element is used for the magnifying-glass in the search box, which we simply borrow from Twitter. You’ll end up with a HTML & CSS representation of the Twitter search form that looks like this:

Twitter search form on Codepen

Neat, huh? Feel free to play around with this Codepen! If you have a request for an upcoming edition of the Tidbits series, let us know in the comments!

If you like this article, give it some sharing ❤️

Feedback on Responsive Web Design

Usersnap is the easiest way approach
to set up QA for your reponsive web design.

Give it a try!