How to add remove border from text field

I have a text box in html form like this

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

Once user enters text in 开发者_JS百科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.

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.

This should work:

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

It looks like $("#searchforstatus").css("border", null) worked prior to 1.4.3, but it wasn't ever actually valid: http://bugs.jquery.com/ticket/7233

// Add border when user enters text field
$("#yourinput").focus(function() {
    $(this).css("border", "1px");
});

// Remove border when user leaves text field
$("#yourinput").blur(function() {
    $(this).css("border", "0");
});

do it strictly in the CSS, don't use javascript for it, that's like using a hammer for a staple..

<style>
#searchforstatus{
border:none;
}


#searchforstatus:focus{
border:1px solid silver;
}

</style>

OR. create classes with border:none and border;1px and assign/unassign them at will.

$("#yourinput").focus(function() {
     $(this).css("border", "");
}

$("yourinput").blur(function() {
   if($(this).val() != "")
          $(this).css("border", "1px");
}

I think the best and simple solution is:

$("#searchforstatus").css("border", "none");

If you use jquery mobile and if you test it for mobile you need to add the following code in your css file

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

It is working for me