I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.

I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.

This is the code:

onload=function(){

    var inp=document.getElementsByTagName('input'), i=0, t ;

    while(t==inp[i++]){

        if(t.type=='text'){

            t.onclick=function(){this.style.border='1px solid red'}

        }

    }

}



</script>

Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?

If its not too hard could explain how to do it or show me some example code?

Cheers - Cohen.