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

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%;
}