Pada peramban WebKit ibarat Google Chrome dan Safari, sebuah elemen input bertipe search mempunyai kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jikalau kita telah mengetikkan sesuatu di dalamnya. Tapi tidak pada peramban yang lain. Terkadang kita merasa butuh dan menyukai fitur itu, dan berharap bisa bekerja pada semua peramban.
Kita bisa memakai markup ekstra dan sedikit JavaScript untuk membuat rekayasa ibarat itu. Tapi untuk memastikan tampilannya polos, gunakan elemen input bertipe text, bukan search:
HTML
<form id="search-form" action="/search" method="get"> <span class="text-input-wrapper"> <input type="text" name="q" size="18"><span title="Input Teks dengan Ikon Pembersih">×</span> </span> <input type="submit" value="Submit"> </form>CSS
.text-input-wrapper { border:1px solid; background-color:white; padding:1px 6px 1px 1px; display:inline-block; } .text-input-wrapper input { border:none; background:none; outline:none; padding:0 0; margin:0 0; font:inherit; } .text-input-wrapper span { cursor:pointer; color:blue; font-weight:bold; visibility:hidden; }JavaScript
(function() { var searchForm = document.getElementById('search-form'), textInput = searchForm.q, clearBtn = textInput.nextSibling; textInput.onkeyup = function() { // Show the clear button if text input value is not empty clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden"; }; // Hide the clear button on click, and reset the input value clearBtn.onclick = function() { this.style.visibility = "hidden"; textInput.value = ""; }; })();