Horje

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>



Single Articles
CSS Code for Responsive Search BoxHTML Search Box Tutorial
HTML Code for Responsive Search BoxHTML Search Box Tutorial
Full Completed Code for Responsive Search BoxHTML Search Box Tutorial


Related Articles
How to create HTML CSS Responsive Search Box HTML Search Box Tutorial

Type:
Css
Category:
Web Tutorial
Sub Category:
HTML Search Box Tutorial
Uploaded by:
Admin