How to Create a Simple Search Box with HTML and CSS2 min read

Learn how to create a basic search box using HTML and CSS with this comprehensive tutorial. In this step-by-step guide, you’ll find the necessary code snippets and explanations to understand the process.

To begin, we’ll start by setting up the HTML and body style rules. The body style rule defines the overall appearance of the webpage. We’ll set the background color to a pleasing shade of #0984e3 and increase the font size to 125% for better readability.

Next, we’ll create the search box itself using an HTML input tag. By assigning the class attribute to “search,” we enable CSS targeting for styling purposes. To provide users with guidance, we include the placeholder text “Search” within the input field.

The “.search” class is where the magic happens. Here, we define various properties such as width, height, background color, and text color to customize the search box. To add a visually appealing search icon, we set it as a background image aligned to the left.

When the search box is in focus, we want to provide visual feedback to the user. To achieve this, we specify the “.search:focus” rule. In this rule, we set the outline color to #0984e3 and activate an animation. The animation creates an engaging effect by changing the background color and moving the search icon slightly to the left.

Lastly, we employ the “@keyframes myanimate” rule to define an animation named “myanimate.” This animation controls the dynamic background color change and subtle movement of the search icon when the search box receives focus.

Congratulations! You’ve successfully created a simple yet effective search box using HTML and CSS. We hope this tutorial has been helpful in expanding your web development skills. If you have any questions or need further clarification, please don’t hesitate to leave a comment below. Thank you for reading, and happy coding!

Code: