Question

trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.

-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border

---UPDATE ---
/* Search box */
.searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
    width:240px; 
    margin-right:4px; 
    margin-left:11px; 
    color:#cccccc;   
    vertical-align: top; 
    padding: 4px 2px 4px 79px;
    border-color: #4FA4F9;
}
.searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
    color:#888888; 
}
.searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
    width:239px; 
    color:#888888; 
    padding: 3px 2px 3px 78px;
}
.searchbox.blur {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
    width:239px; 
    color:#000000; 
    padding: 4px 2px 4px 79px;
}

@-moz-document url-prefix() {
    .searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
    }
}
@-moz-document url-prefix() {
    .searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
        }
}
@-moz-document url-prefix() {
    .searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
    }
}

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}
input, select, textarea {
  margin: 1 0 0;
}
input, textarea, .date {
  border: 1px solid #aaa;
  border-radius: 3px;
  color:#333;
}
input {
  font-size: 13px;
  padding: 0px;
}
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 4px 4px 4px 4px;
}

select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;

}

— html —

<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>

—js—-

/* Search Box Leave */
$(".searchbox").blur(function(){
    $(this).addClass("blur");
});

Answer 1

You could do this using jQuery by setting a class.

$(".searchable").blur(function() {
    $(this).addClass("blur");
});

Then in your css you can set the color like this

.searchable.blur
{
  color:#000;   
}

​
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/

Just bear in mind that the element won’t show its hover color again unless you remove the class.