Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { background: #cccccc; } .search { width: 100%; position: relative; display: flex; } .searchTerm { width: 100%; border: 3px solid #9e0098; border-right: none; padding: 5px; height: 20px; border-radius: 5px 0 0 5px; outline: none; } .searchTerm:focus { color: #380136; } .searchButton { width: 40px; height: 36px; border: 1px solid #9e0098; background: #9e0098; text-align: center; color: #eeeeee; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; } .wrap { width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <h2>Create search boxes</h2> <div class="wrap"> <div class="search"> <input type="text" class="searchTerm" placeholder="Type"> <button type="submit" class="searchButton"> <i class="fa fa-search"></i> </button> </div> </div> </body> </html>