Question

I have a text box in html form like this

'&lt input id="yourinput" type="text" &gt'

Once user enters text in it and moves out i want to make the border to 1 px (so that it does not look like a normal text field). I achieve this by

$("#searchforstatus").css("border", "1px"); 

Now, when the user comes back to the text field, i want to make the text field look like original normal looking text field with the exiting value in it.

Answer 1

Assuming that you want the input to look different only when it contains a value, I’d suggest this:

$(document).ready(
    function(){
        $('#textInput').blur(
            function(){
                if ($(this).val()) {
                    $(this).addClass('bordered');   
                }
            });
        $('#textInput').focus(
            function(){
                $(this).removeClass('bordered');  
            });
    });

And define the bordered css class in the css file (rather than adding/removing css properties in jQuery with css()), for example:

.bordered {
    border: 1px solid #f00;
}

Demo at JS Fiddle.