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类css影响文本框内的值而不是图像。

有什么办法可以为后台添加图像添加样式吗？

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

Answer 1

删除Float:right并添加以下css：

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

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

1 个答案: