Masukkan dengan Gambar Latar yang Hilang - Trik CSS

Anonim

Ini mereplikasi fungsi medan Carian Google yang boleh disematkan standard. Mereka memiliki gambar di latar belakang dan ketika input diklik, gambar akan hilang.

 Search

JavaScript di bawah markup borang:

 (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