输入框的背景图片不考虑图像样式

Question

我有输入框并为它添加背景图片，它默认添加在输入框的左上角。

我需要它在右上角，但我正在更改与此相关的任何内容，它在文本框而不是图像中的影响值。

我的代码是：

  <input type="text" class="general imgcls" value="hello" ng-disabled="disabled"/>

我的css

.general    // This is general css class
   {
    background: #f1f2f2;
    border: none;
    border-radius: 0px;
    width: 140px;
    height:40px;
    margin-bottom: 20px;
   }

 .imgcls
 {
    background-image: url('myimg.svg');
    float : right;
    text-align : right; 
 }

但是，imgcls class css 影响文本框内的值而不是图像。

有什么办法可以为背景添加的图像添加样式吗？

注意：我添加了 diff class 因为它的图像 class 对于其他一些输入是常见的所以可以添加一般图像 class.

Answer 1

删除 Float:right 并在下方添加 css:

.imgcls {
  background-image: url('myimg.svg');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 30px;
}

输入框的背景图片不考虑图像样式

background image for input box not considering image styles

css

background-image