JQUERY: add a tiny arrow next to the following field on this form on focus

Im trying to express in Jquery the following:

I want to show a tiny arrow开发者_StackOverflow right next to the following input/select on the right side so every user knows where to go next.

To express the exact order im trying to make the users follow when completing the form im using numbers on the field name so you can understand the order.

Form: http://jsfiddle.net/yqh5V/1/

Please EXPAND the jsfiddle html so u can properly display the form with the margins etc

Tiny green arrow: http://i53.tinypic.com/f1ystu.png

I cant do it without positioning the arrow to the right and not messing up the margins.

Is it clear what i want to do?

---

This doable in jQuery. First define some css for your arrow, something like

        img.arrow{ position: absolute; } 

so when its added to the document it will not effect the spacing of your form. Then do something along these lines in jQuery

        var arrow = $('img.arrow');

        $('input').focus(function(){
             arrow.remove();
             $(this).traverseToNext('input').prepend(arrow);
        });

TraverseToNext is not a real jQuery statement. If you need help getting jQuery to target your next input field, read up on traversing here http://api.jquery.com/category/traversing/. All you need to do is find a way to tell jQuery how to get to the next input from the current one. It should add the arrow image to just before the input field inside your

        <div class="editor" />

Cheers!

---

I agree that adding the arrow will mess with the margins, etc.

Why not do something else, like change the border on the input / select and maybe the background, too? Something like this

$('input, select').focus(function(){
    $(this).css({'border' : '2px solid green' , 'background' : '#999'});
});

$('input, select').blur(function(){
    $(this).css({'border' : 'none' , 'background' : 'none'});
});

http://jsfiddle.net/jasongennaro/yqh5V/3/