Make INPUT More Stylish

Berbagi tutorial CSS ringan seputaran atribut input. Keterangan support, definisi, tag, pemakaian, sobat bisa baca HTML input tag and HTML5 input Tag. Kegunaan variabel input bisa kita temukan dalam pembuatan modul form action. Dengan hadirnya direktori variable baru yakni CSS3 membuat lebih atraktif penampilan dari input ini :D
Bisa di bilang saat ini bila mau berkreasi sudah enak. Tools sudah ada dimana-mana, baik yang online maupun berbentuk aplikasi/software. Tinggal urusan daya imaginasi berkreasi masing² saja ;))
Coba sekarang sobat baca & simak beberapa source yang memberitakan mengenai CSS tools and generators berikut!

• 25 Useful Online Generators For Web Designers
• 50 Useful Tools and Generators for Easy CSS Development
• 50 CSS Tools and Generators For Quick & Easy Web Development
• 50+ Useful CSS Tools And Generators for Developers

Larinya ke tempat itu² juga ternyata :))
Bentuk dasar variabel input tanpa embel² gaya apapun!

<input type="jenis-type" name="unik-id" value="Contoh Input" />
Sekarang mari kita buat var.input yang diberi taburan bumbu CSS agar terlihat cuamik.

.searchtext {
        width:212px;
        padding:9px 0 9px 9px;
        margin:10px 0;
        background:#eee;
        border:solid 1px #ccc;
        font-size:16px;
        color:#bbb;
        font-style:italic;
        -moz-transition:background-color .3s linear;
        -webkit-transition:background-color .3s linear;
        -ms-transition:background-color .3s linear;
        -o-transition:background-color .3s linear;
        transition:background-color .3s linear
    }
.searchtext:focus {
font-style:normal;color:333
    }
    .searchtext:hover, .searchtext:focus {
        background:#fefefe;
    }
    .searchsubmit {
        font-size:19px;
        font-style:italic;
        border:solid 1px #ccc;
        color:#999;
        padding:5px 9px 7px 9px;
        -webkit-border-radius:0;
        -webkit-appearance:none;
        background:#eee;
    }
    .searchsubmit:hover {
        background:#fefefe
    }

MarkUp HTML<input type="text" id=" " name=" " class="searchtext" placeholder="Search..."/>
<input type="submit" value="go" class="searchsubmit"/>Hehehe...bagus kan :"> Satu lagi ah :P

input {
 font-size: 25px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
}
input[type=email] {
 outline: none;
 width: 90%;
 padding: 15px;
 margin: 0 auto;
 color: #fff;
 border: none;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 background: rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
 -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
 -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
}
input[type=email]:hover {
 background: rgba(0, 0, 0, 0.5);
}
input[type=email]:focus {
 -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
 -o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
 background: rgba(0, 0, 0, 0.6);
}
input[type=submit] {
 position: absolute;
 margin-left: -105px;
 margin-top: 4px;
 font-size: 25px;
 color: #222;
 text-shadow: 0 2px 0 #999;
 padding: 10px;
 width: 100px;
 height: 50px;
 border: none;
 background: #f0f0f0;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 cursor: pointer;
}
input[type=submit]:hover {
 -webkit-box-shadow: 0 0 10px rgb(100%, 0%, 0%);
 -moz-box-shadow: 0 0 10px rgb(100%, 0%, 0%);
 -o-box-shadow: 0 0 10px rgb(100%, 0%, 0%);
 box-shadow: 0 0 10px rgb(100%, 0%, 0%);
 width: 125px;
 margin-left: -130px;
 color: #2AD84F;
}
input[type=submit]:active {
 background: #c3d7ff;
 
}

HTML<input type="email" placeholder="email address" required="required">
<input type="submit" value="submit">
Happy coding \m/