访问输入宽度

Question

我有一个 400 像素宽度的输入字段。当我悬停它时，宽度会增加 500px，当我聚焦它时，宽度会保持增加 500px。比我写下一些文字，点击离开，输入字段回到 400px 宽度。在将一些文本写入字段并单击离开后，我想将输入字段保持在宽度 500px 上，或者按 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 事件并检查它是否为空。如果不添加一些将宽度更改为 500px 的附加类；

你可以看到工作（jQuery）示例here

: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/