Advertisemen
This is how it is going to look in Chrome, Safari and FireFox, sorry it is not tested in Internet Explorer [ Windows ] and Opera. Like in Facebook.
From this
Create a html page and paste the following lines of codes inside the body tag.
<body>
<div id="searchField">
<span class="fa fa-search"></span>
<input type="text" placeholder="Search for the post in this page">
</div>
</body>
<div id="searchField">
<span class="fa fa-search"></span>
<input type="text" placeholder="Search for the post in this page">
</div>
</body>
We are using awesome fonts to show the search icon so that is where class="fa fa-search" comes from.
Now copy and paste the following lines of codes inside the head tag.<style>That's all you need to do, It is pretty simple ha....
#searchField
{
border: 1px solid #d1d1d1;
width: 300px;
padding: 7px;
background: #FFFFFF;
box-shadow: 1px 1px 5px #d8d8d8;
}
#searchField>span
{
color: #c5c5c5;
}
#searchField>input
{
width: 275px;
border: none;
outline: none;
height: 20px;
font-size: 15px;
margin-left: 3px;
}
</style>
Your full code should look like this.
<!DOCTYPE html>Thanks........
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com
/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
#searchField
{
border: 1px solid #d1d1d1;
width: 300px;
padding: 7px;
background: #FFFFFF;
box-shadow: 1px 1px 5px #d8d8d8;
}
#searchField>span
{
color: #c5c5c5;
}
#searchField>input
{
width: 275px;
border: none;
outline: none;
height: 20px;
font-size: 15px;
margin-left: 3px;
}
</style>
</head>
<body>
<div id="searchField">
<span class="fa fa-search"></span>
<input type="text" placeholder=
"Search for the post in this page">
</div>
</body>
</html>
Advertisemen
Tidak ada komentar:
Posting Komentar