[CSS] Input type="text" 안에 아이콘 넣기

다른 블로거 분들을 보면 <div>로 감쌌던데, 그렇게 했더니 자꾸 블록이 아래로 내려갔다.

 

<span id="textBox-Time_icon"> 
	<input type="text" id="insert-limit_st_tm" 
    	   class="test">
</span>

.test {
	width: 40px;
	height: 28px;
	background: #132234;
	background-image : url('경로');
	background-repeat: no-repeat;
	background-position: left;
    background-position-x: 8px;
	color: #fff;
	border-width: 0px;
	font-family: Noto Sans KR;
	position: absolute;
    margin-left: 8px;
    padding-left: 30px;
    padding-right: 5px;
}

 

처음 적용하면 자꾸 중간정렬도안되고 완전 왼쪽에 딱붙어나오게 되는데
padding (텍스트)이랑 Background-position, Background-position-x (아이콘) 를 통해서 오른쪽으로 옮겨줬다.