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

I have attempted to put in a background image on a Kendo UI Textbox.

我试图在Kendo UI文本框中放入背景图像。

It's all well when you don't hover over it.

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

But as soon as you hover over it, this happens:

但只要你将鼠标悬停在它上面，就会发生这种情况：

How do I fix this? When I hover and click into the Textbox, the image needs to stay at the same place.

我该如何解决？当我将鼠标悬停并单击文本框时，图像需要保持在同一位置。

Here is the HTML for adding the Textbox:

以下是添加文本框的HTML：

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

Here is the CSS for adding the background in:

这是用于添加背景的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;
}

1 个解决方案

#1

Solved my own problem. I needed to override the hover setting for the Textbox with CSS.

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

Here is the additional code added:

这是添加的附加代码：

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