search box

                <div class="search-container">
                    <form action="">
                        <input type="text" placeholder="Search..." name="search">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <style>
                    .search-container {max-width: 25vw; margin: 2vw;}
                    .search-container form{position: relative;}
                    .search-container form button {position: absolute; right: 0; top: 0; height: 100%; width: 5vw;  background: transparent; 
                        border: transparent; font-size: 2vw; color: #4b00ff; cursor: pointer; outline: 0;}
                    input[type="text"] { display: block; width: calc(100% - 2.4vw); font-size: 1.8vw; font-weight: 600; color: #4b00ff; padding: 1vw;
                        border: .2vw solid #4b00ff; }
                </style>
            

                <form class="form_a">
                    $lt;label for="search_a">Search$lt;/label>
                    $lt;input id="search_a" type="search" pattern=".*\S.*" required>
                    $lt;span class="caret">$lt;/span>
                </form>
                <style>
                    .form_a, #search_a, .caret {margin: auto;}
                    .form_a {position: relative; width: 100%; max-width: 17vw;}
                    #search_a, .caret {display: block; transition: all calc(1s * 0.5) linear;}
                    #search_a {background: transparent; border-radius: 50%; box-shadow: 0 0 0 0.25em inset; caret-color: #255ff4; width: 2vw; 
                        height: 2vw; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
                    #search_a:focus, #search_a:valid {background: #ffffff; border-radius: 0.25vw; box-shadow: none; padding: 0.75vw 1vw; 
                        transition-duration: calc(1s * 0.25); transition-delay: calc(1s * 0.25); width: 100%; height: 3vw;}
                    #search_a:focus {animation: showCaret 1s steps(1); outline: transparent;}
                    #search_a:focus + .caret, #search_a:valid + .caret { animation: handleToCaret 1s linear; background: transparent; 
                        width: .1vw; height: 1.5vw; transform: translate(0,-1vw) rotate(-180deg) translate(7.5vw,-0.25vw);}
                    #search_a::-webkit-search-decoration {-webkit-appearance: none;}
                    label {color: #e3e4e8; overflow: hidden; position: absolute; width: 0; height: 0; }
                    .caret { background: currentColor; border-radius: 0 0 0.125vw 0.125vw; margin-bottom: -0.6vw; width: 0.25vw; 
                        height: 1vw;  transform: translate(0,-1vw) rotate(-45deg) translate(0,0.875vw); transform-origin: 50% 0;}
        
                    /* Animations */
                    @keyframes showCaret {
                        from {caret-color: transparent; }
                        to { caret-color: #255ff4; }
                    }
                    @keyframes handleToCaret {
                        from {background: currentColor; width: 0.25vw; height: 1vw; transform: translate(0,-1vw) rotate(-45deg) 
                            translate(0,0.875vw);}
                        25% {background: currentColor; width: 0.25vw; height: 1vw; transform: translate(0,-1vw) rotate(-180deg) 
                            translate(0,0.875vw);}
                        50%, 62.5% { background: #255ff4; width: .1vw; height: 1.5vw; transform: translate(0,-1vw) rotate(-180deg) 
                            translate(7.5vw,2.5vw);}
                        75%, 99% {background: #255ff4; width: .1vw; height: 1.5vw; transform: translate(0,-1vw) rotate(-180deg) 
                            translate(7.5vw,-0.25vw);}
                        87.5% {background: #255ff4; width: .1vw; height: 1.5vw; transform: translate(0,-1vw) rotate(-180deg)
                            translate(7.5vw,0.125vw);}
                        to {background: transparent; width: .1vw; height: 1.5vw; transform: translate(0,-1vw) rotate(-180deg) 
                            translate(7.5vw,-0.25vw);}
                    }
                </style>

            

                <div>
                    <p class="spec">Full width:</p>
                        <form class="example" action="/action_page.php">
                        <input type="text" placeholder="Search.." name="search">
                        <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
        
                    <p class="spec">Centered inside a form with max-width:</p>
                        <form class="example" action="/action_page.php" style="margin:auto;max-width:30vw">
                        <input type="text" placeholder="Search.." name="search2">
                        <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
        
                </div> 
                <style>
                    form.example input[type=text] {padding: 1vw; font-size: 1.7vw; border: .1vw solid grey; float: left; width: 65%; 
                        background: #f1f1f1;}
                    form.example button {float: left; width: 20%; padding: 1vw; background: #2196F3; color: white; font-size: 1.7vw; 
                        border: .1vw solid grey;
                    border-left: none; cursor: pointer;}
                    form.example button:hover {background: #0b7dda;}
                    form.example::after {content: "";clear: both; display: table;}
                    
                </style>