CSS3 ile Oluşturulmuş Google Tarzı Arama Kutusu

Selamlar, sabah yer imlerindeki bloglara bakarken bu arama kutusunu gördüm.Kodları iyice analiz ettikten sonra sizinle paylaşmaya karar verdim.Hemen anlatıma geçiyorum.




HTML'yi Düzenle > CTRL + F ile aşağıdaki kodumuzu buluyoruz.

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki CSS kodlarımızı ekliyoruz.

/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmZwC0KcTGKqLafdSP6gu3HiWjehByhFryBE0PZCwCw3g9vQeFbNABbNMeSWdUYpPMfyKO78pCgdmxXibenc4MJOCOs9z5PO2OfmwQ7Rg74kh8cHjc8ZVn_Trfg6JRiigTrP_Y_Ln2-9G/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmZwC0KcTGKqLafdSP6gu3HiWjehByhFryBE0PZCwCw3g9vQeFbNABbNMeSWdUYpPMfyKO78pCgdmxXibenc4MJOCOs9z5PO2OfmwQ7Rg74kh8cHjc8ZVn_Trfg6JRiigTrP_Y_Ln2-9G/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar

Temanızı kaydetmeden devam edin.Şimdi ise aşağıdaki kodumuzu aratın.

</head>

Yukarıdaki kodun hemen öncesine aşağıdaki JavaScript kodlarımızı ekliyoruz.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

İster, temanızın bir bölümünde isterseniz de gadget olarak aşağıdaki kodlarımızı ekleyin.

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Evet işlemlerimiz bu kadar.Herhangi bir sorunda yorum olarak belirtebilirsiniz :)