Τρία όμορφα Search Box με χρήση CSS3

Μόνο με τη χρήση CSS3, δημιουργούμε τρία πολύ όμορφα Search Box για να βάλετε στο blog σας. Το πλαίσιο επεκτείνετε μόλις κάνουμε κλικ επάνω του ή όταν πάρει την εστίαση.

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε έναν από τους τρεις παρακάτω κώδικες, ανάλογα με όποιο Search Box ταιριάζει στο blog σας. Πατήστε [Αποθήκευση] και τελειώσατε. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

Δείτε demo
Μαύρο Search Box

<style type="text/css">
#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1krmeWeAkyjOchmzdF8PLJLVf3emAg8e869Pz04YrnVbTX4MeNTZYa9bi5fNeNFJiJY_uSEARuK0OLhXUGupoND5ga4CImk_laBeGIMwQTknGP7CrYxN_JKA7wR9vnPnqDBUYG5XsTH3j/s200/search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }
</style>
<form action="/search" id="search" method="get">
<input name="q" placeholder="Αναζήτηση..." size="40" type="text" />
</form>

Λευκό Search Box

<style type="text/css">
#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1krmeWeAkyjOchmzdF8PLJLVf3emAg8e869Pz04YrnVbTX4MeNTZYa9bi5fNeNFJiJY_uSEARuK0OLhXUGupoND5ga4CImk_laBeGIMwQTknGP7CrYxN_JKA7wR9vnPnqDBUYG5XsTH3j/s200/search-dark.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    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 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }
</style>
<form action="/search" id="search" method="get">
<input name="q" placeholder="Αναζήτηση..." size="40" type="text" />
</form>

Μαύρο Search Box - Λευκό στην εστίαση

<style type="text/css">
#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1krmeWeAkyjOchmzdF8PLJLVf3emAg8e869Pz04YrnVbTX4MeNTZYa9bi5fNeNFJiJY_uSEARuK0OLhXUGupoND5ga4CImk_laBeGIMwQTknGP7CrYxN_JKA7wR9vnPnqDBUYG5XsTH3j/s200/search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1krmeWeAkyjOchmzdF8PLJLVf3emAg8e869Pz04YrnVbTX4MeNTZYa9bi5fNeNFJiJY_uSEARuK0OLhXUGupoND5ga4CImk_laBeGIMwQTknGP7CrYxN_JKA7wR9vnPnqDBUYG5XsTH3j/s200/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
</style>
<form action="/search" id="search" method="get">
<input name="q" placeholder="Αναζήτηση..." size="40" type="text" />
</form>

[Πηγή]