December 08, 2015

Create Search Box using HTML5 and CSS

A search box is available in most of the website allowing the users to search the specific content easily. Here I will be creating a search box using HTML , CSS3 and with the new  HTML5 placeholder attribute.

We can write a simple code for this example using HTML and CSS.


CSS
            .search-wrapper {
            width: 212px;
            margin:0;

          }

          .search-wrapper input {
        height: 40px;
        padding: 10px 5px;
        float: left;
        font: bold 15px 'arial', 'lucida sans';
        border: 0;
        background: #2fc49c;
        border-radius: 3px 0 0 3px;
        width: 140px;
        }

        .search-wrapper input::-webkit-input-placeholder {
           color: #ffffff;
           font-weight: normal;
           font-style: italic;
        }

         .search-wrapper input:-ms-input-placeholder {
            color: #ffffff;
            font-weight: normal;
            font-style: italic;
        }

        .search-wrapper input:-moz-placeholder {
            color: #ffffff;
            font-weight: normal;
            font-style: italic;
        }

        .search-wrapper button {
        overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        height: 40px;
        width: 72px;
        font: bold 15px/40px 'arial', 'lucida sans'';
        color: #ffffff;
        background: #9227c1;


        }

        .search-wrapper button:hover{  
            background: #5f73e2;
        }

        .search-wrapper button:before {
            content: '';
            position: absolute;
            border-width: 8px 8px 8px 0;
            border-style: solid solid solid none;
            border-color: transparent #9227c1;
            top: 12px;
            left: -6px;
        }

        .search-wrapper button:hover:before{
            border-right-color: #5f73e2;
        }

HTML
      <html>
     <body>
     <form action="/search.html" class="search-wrapper cf">
        <input type="text" placeholder="Search here..." required="">
        <button type="submit">SEARCH</button>
    </form>
    </html>


RESULT






END...

No comments :

Post a Comment