Посещаемая ширина ввода

Question

У меня есть поле ввода шириной 400px. Когда я наведу на него курсор, ширина увеличится на 500px, а когда я сфокусируюсь, ширина будет увеличена на 500px. Затем я записываю некоторый текст, щелкаю и поле ввода возвращается к ширине 400 пикселей. Я хочу оставить поле ввода на ширине 500 пикселей после записи текста в поле и щелкнуть мышью или нажмите клавишу TAB.

У меня это так:

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;}

Это не работает. Я не знаю, как я могу сделать это правильно.

Answer 1

В вашем случае вы должны использовать JavaScript. Вы можете справиться blur событие вашего ввода и проверьте, если оно пустое или нет. Если это не так, добавьте некоторый дополнительный класс, который изменит ширину на 500 пикселей;

Вы можете увидеть рабочий (jQuery) пример здесь

Также :visited псевдокласс работает только для ссылок.

Answer 2

:visited Атрибут применяется только к ссылкам, поэтому вам придется использовать вместо этого Javascript:

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/