Web Searchbar 3
Run
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <title>Searchbar</title> </head> <body> <!-- copy --> <input type='search' placeholder='Search' class='searchbar' /><button type='button' class='barbtn'><i class='fa fa-search' aria-hidden='true'></i></button> <!-- end --> </body> </html>
CSS
.searchbar{ width: 200px; height: 40px; padding-left: 10px; border: 2px solid #19a9a6; border-top-left-radius: 18px; border-top-right-radius: 18px; border-bottom-left-radius: 018px; border-bottom-right-radius: 018px; font-size: 15px; font-family: courier; font-weight: normal; letter-spacing: 1px; text-align: center; color: #000000; background: #ffffff; } .barbtn{ width: 60px; height: 40px; border-top: 18px solid #19a9a6; border-right: 2px solid #19a9a6; border-bottom: 2px solid #19a9a6; border-left: 2px solid #19a9a6; font-size: 15px; font-family: courier; font-weight: normal; letter-spacing: 1px; text-align: center; color: #ffffff; background: #19a9a6; }
Follow Us