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

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

解决了我自己的问题。我需要使用Textbox覆盖CSS的悬停设置。

以下是添加的其他代码：

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