All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Stylish Search Box In HTML

Last Updated : Mar 11, 2024

Stylish Search Box In HTML

In this tutorial we will show you the solution of stylish search box in HTM, as we know CSS means Cascading Style Sheet and we can use css in three type of ways that is Inline, Internal CSS, External CSS.

CSS have more number of properties for styling a particular element. Here we used internal css for style the search box. Let see below few uses with step by step guidance.

Step By Step Guide On Stylish Search Box In HTML :-

For search icon we used fontawesome script with this we can add any type of icon in websites.

We can use either downloaded file or CDN. As we know for search box we need to use <input> tag with search type attribute in html.

When styling a element we need to use many properties of CSS. Let see how to implement to achieve stylish search box.

<!DOCTYPE html>
<html>
<head>
<title>
Stylish Search Box
</title>
<script src="https://kit.fontawesome.com/c914c92120.js" crossorigin="anonymous"></script>
<style>
    body{
        background-image: linear-gradient(rgb(252, 114, 41),rgb(248, 226, 82));
        width: 100%;
        height: 35rem;
        background-repeat: no-repeat;
        background-size: cover;
    }
    input{
      border: 2px solid rgba(160, 160, 160, 0.653);
      border-radius: 12px;
      padding: 6px;
      background-color: rgba(255, 255, 255, 0.637);
    }
    input:focus-visible{
        outline: 0;
        border-bottom: 2px solid rgba(254, 254, 254, 0.705);
        border-radius: 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        background-color: transparent;
    }
   .icon{
       position: absolute;
       left: 12%;
       top: 2.5%;
       color: #555;
   }
</style>
</head>
<body>
    <input type="search" placeholder="Search..." required>
    <i class="fa fa-search icon"></i>
</div>
</form>
</body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. When using css as internally need to declare <style> tag below <head> tag within <style></style> tag CSS properties are written.
  5. If you want to understand css properties first we need to see html elements then only we know how the properties working.
  6. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
  7. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  8. When access css properties on html element we need attributes ID, CLASS or element. <input> tag with type attribute value search used for search box and placeholder attribute value shown to user for entering data.
  9. Required option we can add to all elements it alert users can’t leave as a empty input field.
  10. <i></i> tag specifies icon with help of class attribute. Class value of “fa fa-search” contain icon symbol and “icon” used for style the icon.
  11. CSS Syntaxes for style by using, Element-name { property-name : “value”;} (or) #ID-name {property-name: “value”;} (or) .CLASS-name { property-name : “value”;}.
  12. Within body style curly brace each line defines how the background will display on website. Gradient used for when we need two or more colors on screen and it can set to either linear(horizontal way) or radial(circular way).
  13. Here we used linear-gradient for background by background-image property. Height and width property defines background size and background-repeat property set to avoid duplication by the value of “no-repeat”.
  14. For style <input> tag by border property it contain border-width, border-style, border-color and border-radius defines border edge curve size. Padding specifies gap between its content and border. We know background-color property used for sets background color.
  15. :focus-visible pseudo-class represents an element that has received focus and it will works when user enter cursor on input field. This block of style defines when user focus border-bottom only appear because other sides of boder set to “0” and background-color set to transparent.
  16. When one property value set to “0” it means none. Position property set to absolute when one item need to placed on another item. Here we placed search icon on input field so its position absolute and color set to grey.
  17. In css we can represent color by RGB, hexadecimal or color-name and aligned the icon from page top to 2.5%, from page left to 12%.
  18. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to style any input element in html using css.

Here we used only part of style for search box, we can explore more creative styles using css.

We can do animations also on html elements using css. Usually css used for style websites and make good looks of website on web browsers.

I hope this article on stylish search box in HTML helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪