Change text box border when it is clicked

Question

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.

Answer 1

Yes this can be done using CSS pseudo-classes

Here is an example:

<style>
  .fancyText:hover{border:1px solid red;}
  .fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />

Answer 2

@Aaron is right, and you may visit w3school for css learning,

if you want it using java-script you only need function onFocus, onBlur and access the text box via id

function change()
    {
        var a = document.getElementById('fansy');
        a.style.border = '1px solid red';
    }

Answer 3

Why dont use jQuery to make it simpler?

$(document).ready(function(){
    $('input').each(function(){
       if($(this).attr('type')=='text')
           {
               $(this).focus(function(){
                   $(this).css({'border':'1px solid red'}); 
               });
               $(this).blur(function(){
                   $(this).css({'border':'1px solid green'});
               });
           }
    });
});

Then you'll get multi browser support also.... Don't forget <script src="[the_path_to_jquery_file]" type="text/javascript"></script> to include the jquery-file.

If you replace this

$('input').each(function(){
       if($(this).attr('type')=='text')
           {
               $(this).focus(function(){
                   $(this).css({'border':'1px solid red'}); 
               });
               $(this).blur(function(){
                   $(this).css({'border':'1px solid green'});
               });
           }
    });

with this

$('input[type="text"]').each(function(){
          $(this).focus(function(){
                   $(this).css({'border':'1px solid red'}); 
               });
               $(this).blur(function(){
                   $(this).css({'border':'1px solid green'});
               });
    });

you will automatic get the inputs with attr. type = text. Here is more fact about jQuery attr selecting