background image for input box not considering image styles

Question

I have input box and adding background image for the same , and its default adding on left top of input box.

I need it at right top but i am changing anything related to this , its affect value inside text box instead image.

my code is :

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

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

however, imgcls class css affecting to value inside textbox and not image.

Is there any way out I can give style to background added image ?

Note : I have added diff class because its image class is common for some of other input so can add image in general class.

Answer 1

Remove Float:right and add below css:

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