This members-only tutorial provides the steps to improve the appearance of search form in Oxygen.



For a different look of the search form, refer to this tutorial.

Step 1

Let's enable HTML5 output for the search form.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add support for HTML5 markup


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

2 comments on “Sample Search Form Styling in Oxygen”

  1. I was trying to set up this but with ‘max-width’ instead, so that it’s an adaptable search bar and more responsive out of the box but I was not successful. If I set ‘max-width’ the bar is just always small (doesn’t fill the entire space it has in the div) and I am forced to set the fixed ‘width’ value. The ‘width: auto; ‘ also doesn’t seem to be doing much for me!

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: