html - 访问输入宽度

Question

我有一个 400px 宽度的输入字段。当我悬停它时，宽度会增加 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) 示例

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