Though the above input tag and the ordered list looks fine, it still needs some styling. For the search bar styling, some margin and padding are added to make it look clean. The measurements are in percentage so that it adjusts itself when used in any size of the screen (Mobile, Desktop etc). Webkit transition is used to change the width of the Search bar when clicked. The initial width of search bar is 30%, but when it is clicked, it will change to 70% with an ease-in ease-out transition of 0.15 seconds.
After adding Styling, our page should look like this.
Note: If the styling of your page doesn’t change, make sure the style.css file is in the same folder as index.html.
In the HTML code of search bar, we gave the input an id=”searchbar” and onkeyup we called, the function “search_animal”. onkeyup calls the function every time a key is Released on the keyboard.
We first get our input using getElementById. Make sure to convert it to lower case to avoid case sensitivity while searching. An array of documents is stored in x. This contains every list that has id=”animals”. After that a loop is run to check if innerHTML of every document includes the input substring if it doesn’t, the display property is set to ‘None’ so that it is invisible on the front end.
- Create a Search Bar using HTML and CSS
- Difference between self::$bar and static::$bar in PHP
- Create a Sticky Social Media Bar using HTML and CSS
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to create a progress bar using HTML and CSS?
- How to create Vertical Navigation Bar using HTML and CSS ?
- How to Set Color of Progress Bar using HTML and CSS ?
- How to get card vertically centered between search bar and bottom of the viewport?
- How to add custom google search bar inside your web-page?
- Hide scroll bar, but while still being able to scroll using CSS
- How to make whole area of a list item in navigation bar is clickable using CSS ?
- How to Create Animation Loading Bar using CSS ?
- How to add icon logo in title bar using HTML ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.