Memberikan Style pada elemen form

OK....jika sebelum-sebelumnya saya ngepost yang mellow2..yang menyedihkan tentang asmara yang saya rasa sekarang adalah hal yang bullshit. sekarang saya ingin memberikan postingan yang sedikit bernuansa manfaat. Yah harapan saya sih begitu... :D
Disini saya akan memberikan sedikit tutorial mengenai bagaimana cara membuat input text pada html lebih bagus dan tidak membosankan. Mengenai hal ini saya juga masih pemula, karena saya mempelajari bidang website ini juga masih baru. Jadi dulu sebelum mengenal lebih dalam mengenai CSS (Cascading Style Sheet), input text yang saya buat adalah seperti berikut :






tampilan yang menyedihkan sekali menurut saya berbeda dengan yang satu ini :







kelihatan berbeda kan, untuk membuatnya menjadi seperti itu dapat dilakukan hanya dengan menggunakan beberapa baris kode css berikut :

<style type="text/css">
input,textarea,select{
padding:5px;
border:1px solid #CCC;
background:#FFF;
border-radius:3px;
}
</style>

dan bila ditambahkan hover maka hasilnya akan menjadi lebih bagus dan memberikan kesan dinamis. coba tambahkan kode berikut pada css :


input:hover,textarea:hover,select:hover{
box-shadow:0px 0px 5px #CCC;
border:1px solid #666;
}

maka ketika mouse mengarah diatas elemen input,textarea atau select akan keluar shadow. dalam css dengan selector :hover dapat juga dapat ditambahkan kode-kode css lain sesuai dengan keinginan.

Sekian dari saya...hanya seperti itu, sederhana sekali bukan...disini saya masih pemula dalam memberikan tutorial, jadi mohon dimaklumi jika tulisan saya kacau dan berantakan.