CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kajasha
kajasha

Reputation: 111

Search bar like google in HTML and CSS

I am learning HTML, CSS and I have problem with making search bar like google. Can you give me any advice, what am I doing wrong, especially with size?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</link>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</link>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/x-icon" href="https://image.freepik.com/photos-libre/courbe-de-vapeur-de-la-fumee-d&-39;onde_19-123974.jpg" />
<style>
  .container {
    width: 1000px;
    margin-top: 100px;
    text-align: center;
  }
  h2 {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    size: 150px;
    fill: #294F6D;
  }
  div {
    width: 500px;
    height: 50px;
  }
  h1 {
    text-align: center;
    fill: 02111 D;
  }
  .search input[type="search"] {
    width: 400px;
    height: 50px;
  }
</style>
<body>
  <div class="container"
    <form action="/worldoffragrance">
      <input name="search" />
      <input type="submit" value="GO" />
    </form>
  </div>
</body>
</html>

Upvotes: 11

Views: 34615

Answers (3)

Brandon Zhang
Brandon Zhang

Reputation: 35

    <style>
        input {
            border-radius: 24px;
            border: 1px solid #dfe1e5;
            background: #fff;  
            padding: 20px;
            display: flex;
            z-index: 3;
            width: 638px;
        height: 44px;
        margin: 20px;
    }
        input:hover{
            box-shadow: 0 0 8px 1px #e1e1e1;
        }
    </style>
    <form action="https://www.google.com/search" 
    method="get"target="_blank" id="search-form">
    <input name="q" type="text" placeholder="Google Search" 
    autocomplete="off" autofocus></form>

Almost an exact replica of Google Search Bar

Upvotes: 1

Dadhich Sourav
Dadhich Sourav

Reputation: 289

I have made this and working fine..

<!DOCTYPE html>
<html>
<head>
<style>
.searchbar{
    margin-top:25px;
   margin-left:283px;
   width:100%;
}
.bar{
    border-radius:0;
    -webkit-box-shadow: 2px 3px 0px -2px #ccc;
    padding:10px;
    border:0px;
    outline: none;
    border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #CCC;
}
.bar:hover{
    -webkit-box-shadow: 3px 6px 7px -3px #ccc;
}
</style>
</head>
<body>
                <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <div class="searchbar">
                    <div class="form-group ">
                        <input type="text" class="bar" style="width:588px; height:44px; outline:none;" class="form-control" >
                         <a href="#"><i style="margin-left:559px; top:-30px; "class="glyphicon glyphicon-search"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Hitesh Misro
Hitesh Misro

Reputation: 3461

Try this, This might help you in some way.

Updated

input{
    border: none;
    padding: 10px;
    margin: 10px;
    height: 20px;
    width: 500px;
    border:1px solid #eaeaea;
    outline:none;
}
input:hover{
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
    border-color:#4d90fe;
}

input[type="submit"] {
    border-radius: 2px;
    background: #f2f2f2;
    border: 1px solid #f2f2f2;
    color: #757575;
    cursor: default;
    font-size: 14px;
    font-weight: bold;
    width: 100px;
    padding: 0 16px;
    height:36px;
}
input[type="submit"]:hover {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background: #f8f8f8;
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    color: #222;
}
<div class="main">
<input type="text" />
<input type="submit" value="Go">
</div>

Upvotes: 15

Related Questions