HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>       
<section class="main" >
	 <form class="search" method="post" action="index.html" >
		 <input type="text" name="q" placeholder="Search..." onkeyup="myFunction()" id="gepty" />		   
       <ul class="results" id="style-1"  >
         <li><a href="#">ABC Institute Of Technology</a></li>
         <li><a href="https://www.google.co.in/">Search Result Google</a></li>
         	<li><a href="#">Search Result #4</a></li>
            <li><a href="#">Search Result #1</a></li>
			 <li><a href="#">Search Result #2</a></li>
	 		<li><a href="#">Search Result #3</a></li>
         	<li><a href="#">Search Result #4</a></li>
		 </ul> 
	 </form>
</section>
  <script>
function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById("gepty");
    filter = input.value.toUpperCase();
    ul = document.getElementById("style-1");
    li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>
 
</body>
</html>

body {
    background:url(http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg);
    color: #404040;
    font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}

a {
    color: #1e7ad3;
    text-decoration: none;
}

a:hover { text-decoration: underline }

.container, .main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
}

.main { margin-top: 50px }

input {
    font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #555860;
}

.search {
    position: relative;
    margin: 0 auto;
    width: 90%;  
}

.search input {
      box-shadow: 10px 10px 5px grey;
    height: 30px;
    width: 100%;
    padding: 0 12px 0 25px;
    background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 8.5px no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color: #a8acbc #babdcc #c0c3d2;
    border-radius: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    overflow-x:hidden;
    overflow-y:auto;  
    opacity: 0.7;
}

.search input:focus {
    outline: none;
    border-color: #6ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}

.search input:focus + .results { display: block }

.search .results {
    display: none;
    position: absolute;
    top: 40px;
    height:200px;
    left: 0;
    right: 0;
    opacity: 0.5;
    z-index: 10;
    padding: 0;
    margin: 0;
    border-width: 2px;
    border-style: solid;
    border-color: #cbcfe2 #c8cee7 #c4c7d7;
    border-radius: 15px;
    background-color: #fdfdfd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: linear-gradient(top, #fdfdfd, #eceef4);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    overflow-x:hidden;
    overflow-y:auto;
  box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	-moz-box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	-webkit-box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	-o-box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	border-radius:7px;
}

.search .results li { display: block }

.search .results li:first-child { margin-top: -1px }

.search .results li:first-child:before, .search .results li:first-child:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px outset transparent;
  
}

.search .results li:first-child:before {
    border-bottom: 5px solid #c4c7d7;
    top: -11px;
}

.search .results li:first-child:after {
    border-bottom: 5px solid #fdfdfd;
    top: -10px;
}

.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }

.search .results li:last-child { margin-bottom: -1px }

.search .results a {
    display: block;
    position: relative;
    margin: 0 -1px;
    padding: 6px 40px 6px 10px;
    color: #808394;
    font-weight: 500;
    text-shadow: 0 1px #fff;
    border: 1px solid transparent;
    border-radius: 3px;
      
}

.search .results a span { font-weight: 200 }

.search .results a:before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -9px;
    background:  0 0 no-repeat;
    opacity: 0.5;
}

.search .results a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.0);
  
}

:-moz-placeholder {
    color: #a7aabc;
    font-weight: 200;
}

::-webkit-input-placeholder {
    color: #a7aabc;
    font-weight: 200;
}

.lt-ie9 .search input { line-height: 26px }

#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
	background-color: #F5F5F5;

border-radius:25px;
}

#style-1::-webkit-scrollbar
{
	width: 9px;
	background-color: #bfbfbf;
    border-radius: 10px;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
	background-color: #595959;
    opacity: 0.5;

}

#style-1 li a:hover:not(.header) {
  background-color: #eee;

}

.search{ 
  box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	-moz-box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	-webkit-box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	-o-box-shadow: 10px 10px 5px  rgba(0,0,0,0.6);
	border-radius:25px;
}