Input Teks dengan Ikon Pembersih

Pada peramban WebKit seperti Google Chrome dan Safari, sebuah elemen input bertipe search memiliki kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jika 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 menggunakan markup ekstra dan sedikit JavaScript untuk menciptakan rekayasa seperti 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="Clear">&times;</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 = "";
    };
})();

Demo