文本框悬停背景图像移动和重新调整大小

Question

我试图在 Kendo UI Textbox 上放置背景图片。

当你不将鼠标悬停在上面时，一切都很好。

但是当你将鼠标悬停在上面时，会发生这种情况：

我该如何解决这个问题？当我将鼠标悬停并单击进入 Textbox 时，图像需要留在同一位置。

这里是添加文本框的HTML：

@Html.Kendo().TextBoxFor(vm => vm.Username)

这里是 CSS 添加背景的方法：

#Username.k-textbox{

    background-image:url(/images/User_Icon.svg);       
}

input.k-textbox{
    background-size:19px;
    background-repeat:no-repeat;
    background-position:12px 50%;       
    outline: none;
    display: inline-block;
}

Answer 1

解决了我自己的问题。我需要用 CSS.

覆盖 Textbox 的悬停设置

这是添加的附加代码：

input.k-textbox:hover{
    background-size:19px;
    background-repeat:no-repeat;
    background-position:12px 50%;
}