search bar along with search icon as button

+1 praveenraj .s.r · January 13, 2016
For nearly a month I'm struggling to code a search bar with search icon like youtube.. Please anybody Help me with this and the code is 
HTML: 
   <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/shapes.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="search-container">
      <form id="search" method="get">
        <input type="text" id="search-bar" placeholder="search your cast and crew" name="search query" autofocus>
        <input type="submit">
    </div><!--end of search-container-->
    </form>

  </body>
</html>
CSS:
    *{
  padding: 0px;
  margin: 0px;
}
body #search-container{
  position: relative;
  font: sans-serif;
  top: 0px;
  width:auto;
  height: 200px;;
  border: 2px solid red;
}
#search{
  display: block;
  position: absolute;
  border: 2px solid red;
  top: 20%;
  right: 15%;

}
form #search-bar{
  border: 1.5px solid grey;
  height: 28px;
  width: 340px;
  }

input[type="submit"]{
    width: 60px;
    text-indent: 100000000px;
    overflow: hidden;
    height: 30px;
    cursor: pointer;
    background-color:#e5e5e5;
    border: 1.5px solid grey;
    background-image:url(D://newmodel/png/sc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


Post a Reply

Replies

Oldest  Newest  Rating
0 Glenn Cook · January 13, 2016
you have the search bar, but you to use AJAX or php in a sever to connect to a database to for the search bar to look for something, this is a good place to start, https://www.thenewboston.com/videos.php?cat=61, you will laso need to run it on a sever, I use XAMPP from Apache, for the most part it works well
  • 1

HTML / CSS / Web Design

107,050 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators