Вкарване на иконка в input поле

[anonymous12]

Искам да попитам как мога да вкарам в input кода 2 div класа едната е div на полето,а другата на иконката идеята ми е картинката в input полето да стане като тука http://www.browserstack.com/ като отида върху иконката на потребителското име курсора на мишката не се променя и даже като натисна върху иконката може да се въвежда текст,а при мен сега е като отида върху иконката курсора става стрелка и като натисна не мога да пиша трябва върху полето да отида да натисна ето код

		  <div class="user_icon"></div>
          <input id="user" type="text" placeholder="Username" size="32" maxlength="30" name="text"/>

[css]#user{
background:url("../img/text.png")no-repeat;
background-position:0px 50%;
outline:none;
border:0;
font-size:14px;
font-familyroximanova;
color:#9b9b9b;
width:178px;
height:38px;
position:relative;
left:13.5%;
top:-45px;
padding-left:40px;
padding-right:10px;
padding-top:3px;
}
.user_icon{
background:url("../img/icons.png")no-repeat;
background-position:0px 100%;
width:16px;
height:21px;
position:absolute;
top:69px;
left:42.2%;
z-index:2;
}[/css]

И искам да попитам как може да се направи така текста там е по светъл,а като се натисне да се въвежда текст става прозрачен и мисля,че около input полето се появява сенки с някакъв цвят.

 

[ih999]

За да направиш даден обект прозрачен му сложи

 opacity: 0.5

което значи, че му променяш прозрачността 50%

 

[anonymous12]

Не става така цялото поле става прозрачно
Edit: Реших проблема с прозрачността ползвах този код в css

:focus::-webkit-input-placeholder{
opacity:0.5;
}