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 mengenai Bagaimana Cara Merancang Background Bewarna Di Text Input Dan Textarea Menggunakan HTML5 Dan CSS3, yang lazim kita lihat dengan warna defaultnya setiap form input yang menurut saya benar-benar kaku,

kali ini saya ingin mengubahnya ingin memberinya sebuah background ketika di klik agar tak terlihat kaku dan membosankan, caranya sangatlah gampang, teman teman dapat seketika ikuti yah dapat salinkan scriptnya pun 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>

Apabila telah disave dan jalankan di browser teman teman lalu coba ketikan apapun lalu dengan tak terduga karenanya ada hiasan background di inputannya, lumayan gampang bukan ?

Saya rasa lumayan artikel mengenai Bagaimana Cara Merancang Background Bewarna Di Text Input Dan Textarea Menggunakan HTML5 Dan CSS3, hingga bertemu diartikel berikutnya dan hingga jumpa.

bagi melihat klik DEMO

 

#KeepLearn

#IsmetMA

Sumber https://kursuswebsite.org