HTML/CSS - Search Bar Without JavaScript

HTML/CSS - Search Bar Without JavaScript

Hello colleagues.

In today's article, we will show you how to create a search form without scripts. This search bar does not have animations or effects. You can enter a keyword and click search.

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form class="searchform cf">
    <input type="text" placeholder="you’re text">
    <button type="submit">Search</button>
</form>
</body>
</html>

 

CSS code.

*,*:after,*:before {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

body {
    background: #3aaae8;
    color: #fff;
    font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
a,a:visited {
    color:#fff
}

.searchform {
    background:#f4f4f4;
    background:rgba(244,244,244,.79);
    border: 1px solid #d3d3d3;
    left: 50%;
    padding: 2px 5px;
    position: absolute;
    margin: -22px 0 0 -170px;
    top: 50%;
    width:339px;
    box-shadow:0 4px 9px rgba(0,0,0,.37);
    -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
    -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px
}

.searchform input, .searchform button {
    float: left
}
.searchform input {
    background:#fefefe;
    border: none;
    font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    margin-right: 5px;
    padding: 10px;
    width: 216px;
    box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px
}
.searchform input:focus {
    outline: none;
    box-shadow:0 0 4px #0d76be inset;
    -moz-box-shadow:0 0 4px #0d76be inset;
    -webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchform input::-webkit-input-placeholder {
    font-style: italic;
    line-height: 15px
}

.searchform input:-moz-placeholder {
    font-style: italic;
    line-height: 15px
}

.searchform button {
    background: rgb(52,173,236);
    background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)), color-stop(100%,rgba(38,145,220,1)));
    background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
    border: none;
    color:#fff;
    cursor: pointer;
    font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    padding: 10px;
    width:106px;
    box-shadow: 0 0 2px #2692dd inset;
    -moz-box-shadow: 0 0 2px #2692dd inset;
    -webkit-box-shadow: 0 0 2px #2692dd inset;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}
.searchform button:hover {
    opacity:.9;
}

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB