위치 절대 값을 사용하지 않고 텍스트 상자 위에 아이콘을 플로트합니다.

Question

필자는 인터넷에서보고 필자에게 해결책을 찾을 수 없었습니다. 가능해야합니다. 로그인 영역이 있습니다. 텍스트 상자의 시작 부분에 자물쇠 아이콘이있는 텍스트 상자가 있습니다. No는 position:absolute;을 사용하지만 브라우저 위치 지정 차이를 처리해야합니다. position:absolute;을 사용하지 않고 아이콘을 tex 상자 위로 플로팅 할 수 있습니까?

<div class="login_password_box"> 
    <i class="icon-lock"></i> 
    <input type="password" id="login_password" value="" /> 
</div> 

Answer 1

입력 요소의 배경으로 아이콘을 설정할 수 있습니다. 그런 다음 배경 위치로 배치하십시오. Put icon inside input element in a form

---

#login_password { 
    background: url('path/to/image.jpg') no-repeat; 
    background-position: left center; 
} 

작업 예 :

이 한 번 봐 가지고 http://jsfiddle.net/WZ7jj/이