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

Question

我有一个输入框，当它被加载时非常小，我希望它在用户点击它时使用CSS调整大小（使用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;
}