|
|
Here gives simple HTML CSS based Responsive Search Box |
CSS Code for Responsive Search Box
style.css
Example:
CSS
<style>
.form-search{ margin: 0 auto; text-align: center; font: bold 13px sans-serif; max-width: 70%; position: relative;
}
.form-search input{ width: 60%; box-sizing: border-box; border-bottom-left-radius: 2px; border-top-left-radius: 2px; background-color: #ffffff; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 14px 15px 14px 40px; border: 1px solid #b6c3cd;; border-right: 0; color:#4E565C; outline: none; -webkit-appearance: none;
}
.form-search button{ border-bottom-right-radius: 2px; border-top-right-radius: 2px; background-color: #6caee0; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); color: #ffffff; padding: 15px 22px; margin-left: -4px; cursor: pointer; border: none; outline: none;
}
.form-search i{ position: absolute; top: 15px; left: 20px; font-size: 16px; color: #80A3BD;
}
</style>
HTML Code for Responsive Search Box
index.html
Example:
HTML
<form class="form-search" method="get" action="#"> <input type="search" name="search" placeholder="search your book here for.."> <button type="submit">Search</button> </form>
Full Completed Code for Responsive Search Box
index.html
Example:
HTML
<style>
.form-search{ margin: 0 auto; text-align: center; font: bold 13px sans-serif; max-width: 70%; position: relative;
}
.form-search input{ width: 60%; box-sizing: border-box; border-bottom-left-radius: 2px; border-top-left-radius: 2px; background-color: #ffffff; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 14px 15px 14px 40px; border: 1px solid #b6c3cd;; border-right: 0; color:#4E565C; outline: none; -webkit-appearance: none;
}
.form-search button{ border-bottom-right-radius: 2px; border-top-right-radius: 2px; background-color: #6caee0; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); color: #ffffff; padding: 15px 22px; margin-left: -4px; cursor: pointer; border: none; outline: none;
}
.form-search i{ position: absolute; top: 15px; left: 20px; font-size: 16px; color: #80A3BD;
}
</style> <form class="form-search" method="get" action="#"> <input type="search" name="search" placeholder="search your book here for.."> <button type="submit">Search</button> </form>
Output should be:
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Search Box Tutorial |
|
Uploaded by
: |
Admin |