Πλαίσιο αναζήτησης CSS3 Σκούρο






Ένα πλαίσιο αναζήτησης που όταν κάνετε κλικ ανοίγει εμπνευσμένο από την apple.com

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο HTML
<style type="text/css">/* foulscode.blogspot.gr */
 #search{padding:0}#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5fN6ZveyPn8H31ExPNbSj2LRNsK9UGzHEXBa__fJyqdnHSsnAqhxyhnfR64WyiLZdFNm7PDhFVOTbYhqYXZLiQe_klEcvmgYjSah9q43d3iO49VToUm8dlAKnVeWsW_w7OnwMDLiq29A/s20/Search-icon.png) no-repeat 5px 5px #fcfcfc; border:1px solid #ddd; font:bold 12px Arial,Helvetica,Sans-serif; color:#888; width:210px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -webkit-transition:all .7s ease 0s; -moz-transition:all .7s ease 0s; -o-transition:all .7s ease 0s; transition:all .7s ease 0s}#search input[type="text"]:focus{ width:300px}/* foulscode.blogspot.gr */
</style><center><form method="get" action="/search" id="search"><input name="q" type="text" size="50" placeholder="Αναζήτηση..." /></form></center>


Αλλάζοντας τα width:210px;  width:300px  προσαρμόζεται όπως το θέλετε!

Αφήστε τα σχόλιά σας εδώ κάτω αν έχετε κάτι να ρωτήσετε!


Κατηγορίες:
Σχόλια