Question

I was wondering, if it was possible to clear a text box with a css code rather than using javascript ?

Answer 1

This isn’t possible with CSS, only with JS:

Event handler function:

addEvent(document.getElementById('IDHERE'), "focus",
function() {
    clearText('IDHERE');
});

Event listener function:

//addEvent listener
function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    } else {
        if (obj.attachEvent) {
            obj["e" + type + fn] = fn;
            obj[type + fn] = function() {
                obj["e" + type + fn](window.event);
            };
            obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
}

ClearText function:

//Clear on focus function
function clearText(id) {
    document.getElementById(id).value = "";
}

This is pure JS, no libraries needed here, very fast and x-browser compatible 🙂