Masukan dengan Gambar Latar yang Menghilang - Trik CSS

Anonim

Ini mereplikasi fungsionalitas bidang Google Penelusuran standar yang dapat disematkan. Mereka memiliki gambar di latar belakang dan ketika masukan diklik, gambar tersebut menghilang.

 Search

JavaScript di bawah markup formulir:

 (function() ( var id = document.getElementById('search-form'); if (id && id.txtInput) ( var name = id.txtInput; var unclicked = function() ( if (name.value == '') ( name.style.background = '#FFFFFF url(images/googbg.png.webp) left no-repeat'; ) ); var clicked = function() ( name.style.background = '#ffffff'; ); name.onfocus = clicked; name.onblur = unclicked; unclicked(); ) ))();

Lihat Demo