Visited input width

Question

I have an input field 400px width. When I hover it, width will increase on 500px, when I focus it, width will stay increased on 500px. Than I write down some text, click away and input field come back to 400px width. I want to stay input field on width 500px after writing down some text into the field and click away, or press TAB.

I have it like this:

input { background-color:#fff; width:400px; ....... } 
input:hover { opacity:0.9; filter:alpha(opacity=90); width:500px;} 
input:focus {  color:#ff6b4f; box-shadow: 0 0 8px #fff; width:500px;} 
input:visited {  color:#ff6b4f; box-shadow: 0 0 8px #fff; width:500px;}

This does not work. I do not know how can I do that correctly.

Answer 1

In your case you should use javascript. You can handle blur event of your input and check if it's empty or not. If it's not add some additional class which change width to 500px;

You can see working (jQuery) example here

Also :visited pseudo-class works only for links.

Answer 2

The :visited attribute only applies to links, so you'll have to use Javascript instead:

CSS:
input {
    width:200px;
    border:1px solid #ccc;
    background-color:#eee;
    padding:0.25em 0.5em;
}
input:hover, input:focus, input.visited {
    width:300px;
}

HTML:
<form>
    <input name="x" onchange="this.className=(this.value=='')?'':'visited';" />
</form>

JSFiddle: http://jsfiddle.net/e77CG/