Menu
Iam learning HTML, CSS and i have problem with making search bar like google.
Can you give me any advice, what am I doing wrong, especialy with size? Thanks :)
<!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>Thanks for your any suggestions :)
366
In the Control Panel click the search engine you want to use. Click Setup in the sidebar, and then click the Basics tab. In the Details section, click Get code. Copy the code and paste it into your page's HTML source code where you want the Programmable Search Element to appear.
In the HTML code of search bar, we gave the input an id=”searchbar” and onkeyup we called, the function “search_animal”. onkeyup calls the function every time a key is released on the keyboard. We first get our input using getElementById. Make sure to convert it to lower case to avoid case sensitivity while searching.
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>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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With