Add more css classes in one function

Question

I need to create a function with this: onMouseDown to add that class,onChange that other class and onBlur last class. With ".animate" is more wonderful, but is ok even without.

onMouseDown="this.className='styleDropDownClick';
onChange="this.className='styleDropDown'";
onBlur="this.className='styleDropDown'; 

If anyoane can help me , thank's.

Answer 1

Try the following functions:

    function styleDropDownClick() {

        var textForm = document.forms["textForm"];
        textForm.fname.setAttribute("class", "styleDropDownClick");
    }
    function styleDropDown() {
        var textForm = document.forms["textForm"];
        textForm.fname.setAttribute("class", "styleDropDown");
    }

This works with the following HTML:

   <form id="textForm">
       <input type="text" class="styleDropDown" name="fname"
           onBlur="styleDropDown()" onChange="styleDropDown()" onMouseDown="styleDropDownClick()" value="test"/>
       <input type="text" class="styleDropDown" name="fname2" value="test2"/>
   </form>

Answer 2

Fixed! My problew was that the child of select is not expanding with auto width or a given width.

 $("select").click(function () {
    $(this).children().addClass("cooling");
    });

here is an example, it works only for IE

http://jsfiddle.net/DCjYA/132/