html - 如何使用 CSS 调整焦点输入框的大小

Question

我有一个输入框，它在加载时非常小，我希望它在用户单击它(使用 CSS)时调整大小以变大。

我的 CSS 代码是:

input.tagInputField {
 box-sizing: border-box;
 border: none;
 background-color: #fff;
 width: 2em;
 color: #000;
 font-size: 14px;
}

input.tagInputField:focus {
 width: 50px;
}

但它不起作用...没有响应...有什么想法吗？

谢谢!

更新

html代码(图片不好意思，这样获取最快)

Answer 1

成功了。其他一些样式覆盖了这个样式，所以根据@putvande 的建议，我检查了它并添加了 !important

input.tagInputField:focus {
 width: 50px !important;
}