html - 当光标不在输入字段 css 上时文本消失

Question

这是我的CSS代码:

#text3 {
    background: #333;
    color: #ccc;
    width: 50px;
    height: 25px;
    padding: 6px 15px 6px 35px;
    border-radius: 50px;
    transition: 1s all ease;
    outline: 0;
}

#text3:hover {
    width: 250px;
}

这是我的 html 代码:

<input type="text" name="username" id="text3"/>

所以我的问题是，当用户的光标在输入字段上时，它会变大，这很好，但是当他在其中键入内容并且光标消失时，文本字段会变小，并且那里没有文本。我知道当用户的光标不在文本字段上时该字段应该变小，但为什么文本会消失？我希望你可以帮助我。谢谢。

Answer 1

你也应该为 focus 状态设置样式。

#text3:focus,
#text3:hover {
    width: 250px;
}

jsfiddle

更新:

使用 jQuery 执行此操作并且永远不会回到第一个状态

$('input').on('focus', function () {
    $(this).addClass('Big');
});

jsfiddle