如果更改了任何字段，请更改表单背景颜色

Question

So I have this big, complex page with several forms, some of them are quite large. The page is filled with JavaScript code that performs some actions on the forms inputs.

I would like to have a visual feedback when a form has some inputs changed from its original value. Ideally, some light background color, by using only CSS.

Answer 1

You can use plain javascript to set a special class for a couple of seconds to highlight the change, and then remove it.

HTML:

<div id="MyElement">Some Stuff</div>

Javascript:

// On data changed:
document.getElementById("MyElement").className = "highlighted";
setTimeout(function() { document.getElementById("MyElement").className = ""; }, 5000); // remove highlight after 5 seconds

make sure you have a proper CSS class to reflect that. CSS:

.highlighted
{
    background-color: yellow;
}

Answer 2

document.getElementById('form-id').onchange = function() {
    //tweak css here
};

Demo Fiddle