Cara Membuat Background Bewarna Pada Text Input Dan Textarea Menggunakan HTML5 Dan CSS3

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Background Bewarna Pada Text Input Dan Textarea Menggunakan HTML5 Dan CSS3, yang biasa kita lihat dengan warna defaultnya setiap form input yang menurut saya sangat kaku,

kali ini saya ingin mengubahnya ingin memberinya sebuah background ketika di klik agar tidak terlihat kaku dan membosankan, caranya sangatlah mudah, teman teman bisa langsung ikuti yah bisa salinkan scriptnya juga dibawah sini :

<article>
			<div class="isi">
				Nama : <br/>
				<input type="text" name="nama" class="satu"><br/>
				Email : <br/>
				<input type="email" name="email" class="dua"><br/>
				Pesan : <br/>
				<textarea name="" id="" cols="30" rows="10"></textarea><br/>
				<input type="submit" name="submit" value="KIRIM">
			</div>
		</article>

style cssnya :

<style>
article {background: #7f8c8d; color:green}
	.isi {margin:auto; width: 300px;}

	.satu {border:3px solid red; border-radius: 5px 0 5px 5px; padding: 5px; width: 500px;}

	.satu:focus{background: red; color: blue; font-weight: bold;}

	.dua {border:3px solid blue; border-radius: 5px 0 5px 5px; padding: 5px; width: 500px;}

	.dua:focus{background: lightblue; color: red; font-weight: bold;}
	
	textarea {border:3px solid orange; border-radius: 5px 0 5px 5px; padding: 5px; width: 500px;}
	textarea:focus{background: #9b59b6; color: white; font-weight: bold;}
	input[type=submit] {border:3px solid orange; color: white; font-weight: bolder; cursor: pointer; border-radius: 5px 0 5px 5px;
 padding: 5px; width: 500px; background: red}
</style>

Jika sudah disave dan jalankan pada browser teman teman lalu coba ketikan apapun lalu dengan tidak terduga maka ada hiasan background pada inputannya, cukup mudah bukan ?

Saya rasa cukup artikel tentang Bagaimana Cara Membuat Background Bewarna Pada Text Input Dan Textarea Menggunakan HTML5 Dan CSS3, sampai bertemu diartikel selanjutnya dan sampai jumpa.

untuk melihat klik DEMO

#KeepLearn

#IsmetMA