이미지 상자를 고려하지 않은 입력 상자의 배경 이미지

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