Memasang Input Text ke Gambar dalam HTML dan CSS

Diketahui:

Saya mempunyai gambar dari photoshop seperti terlihat dibawah ini:

201500211325frmlLoginPShop

Keinginan:

  1. Saya ingin agar teks yang disamping kanan icon orang ditempati oleh input text dari HTML sehingga bisa diisi
  2. Saya ingin agar nanti input text HTML-nya mempunyai placeholder dengan tulisan Username … dengan font 14pt seperti terlihat pada gambar dibawah ini :

201500211330usernamePShop

 

Hasil Slice Photoshop

Setelah dislice dan disimpan dengan format HTML and Images maka hasil untuk gambar yang ada icon orangnya adalah seperti dibawah ini:

<img src=”images/userGB.png” width=”218″ height=”44″ alt=””>

Pertanyaan:

Bagaimana caranya agar hasil gambar yang dislice tersebut bisa kita masukkan input text HTML ke dalamnya … ?

Jawaban:

Hapuslah kode

<img src=”images/userGB.png” width=”218″ height=”44″ alt=””>

Lalu ganti dengan

<input type=”text” class=”usLg” name=”username” placeholder=”Username … “>

Lalu masukkan kode css dibawah ini di dalam tag <head> :

<style type=”text/css”>.usLg{

width:218px;
height:44px;
padding-left:10px;
background-image: url(‘images/userGb.png’);
font-size:14pt;
border:0;

}

</style>

Penutup

Sekian dan Terima Kasih.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *