텍스트 입력란에 아이콘 넣기

텍스트 입력란에 아이콘을 넣으려고합니다.
예 :
example
텍스트 입력란에 아이콘 넣기

한 용액 배경 화상을 사용하고 사용되는 패딩 왼쪽한다.

하지만 CSS 스프라이트를 사용하고 싶습니다. 다음 코드를 시도 :

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 

    .input { 
     padding-left:35px; 
     width: 128px; 
     background: Red; 

    } 



    .sprite:before{ 
     background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png'); 
     content: " "; 
     position: absolute; 
     height:32px; 
     width:32px; 
     margin: -10px 0 0 -10px; 
     z-index:100; 
    } 


    .sprite:before { 
     background-position: -32px 0; 
    } 

    </style> 
</head> 
<body> 

    <input type="text" class="input sprite"></input> 

</body> 
</html>

내가 뭘 잘못하고 있니?

출처

2013-11-14 POIR

죄송합니다. 귀하의 솔루션이 작동하지 않는 이유를 모르겠습니다. 직접 시도했지만 태그 안에 -Tag가 포함되어 있습니다.

그럼, 이와 비슷한 것 (빠르고 더러운 것)은 무엇입니까?

또는 다음과 같이 했습니까? "한 가지 해결 방법은 배경 이미지를 사용하고 패딩 왼쪽을 사용하는 것입니다."?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
input 
{ 
    width: 250px; 
    height: 65px; 
    padding-left: 85px; 
} 
img.home 
{ 
    width:85px; 
    height:65px; 
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png') 0 0; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

</style> 
</head> 

<body> 
<input type="text" class="input"/><img class="home"> 
</body> 
</html>

출처

2013-11-14 13:47:49 fen89

enter image description here 내가 원하는 효과를 어떻게 될지 모르겠지만, 난 당신이 이미지를 볼 수 없기 때문에,이 문제가 자신을 그렇게 지적하는 것으로 대답을했을 어떻게 됐을까 예제 마크 업에서 손이 잘못 되었다면 입력 요소에 :before을 사용합니다. this answer에서 볼 수 있듯이 ::before 및 ::after과 같은 의사 요소는 컨테이너에만 적용 할 수 있습니다.

은 단순히 당신이 마음에 무엇을위한 좋은 출발점이 될 수

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

.input { 
    padding-left: 35px; 
    width: 128px; 
    background: Red; 
} 

.sprite:before { 
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png'); 
    content: ""; 
    position: absolute; 
    height: 32px; 
    width: 32px; 
    margin: -10px 0 0 -10px; 
    z-index: 100; 
} 

.sprite:before { 
    background-position: -32px 0; 
} 

</style> 
</head> 
<body> 

<div class="sprite"> 
    <input type="text"class="input"></input> 
</div> 

</body> 
</html>

에 마크 업을 변경.

출처

2014-11-27 13:40:09 Herick

텍스트 입력란에 아이콘 넣기

답변

관련 문제