Как поставить иконку в input (type text) и убрать обводку при клике на инпут?

#html #css

Хочу в инпут поставить иконку, как в поиске друзей вконтакте. Там в начале инпута
серая лупа стоит. Второй момент. Тоже как вконтакте хочу, чтоб при введении курсора
в инпут, не было стандартной обводки браузера.    

Ответы

Ответ 1

Стандартная обводка браузера убирается с помощью outline: none; в CSS. Чтобы добавить
картинку в форму можно применить следующее:   

input {
    background-image: url(ссылка на изображение);   
    background-repeat: no-repeat; /*Убираем повтор изображения*/   
    background-position: 4px; /*Позиционируем*/   
    outline: none; /*убираем стандартную обводку браузера*/   
    -moz-border-radius: 5px; /*закругляем углы для Mozilla*/  
    -webkit-border-radius: 5px; /*закругляем углы для Chrome, Safari*/   
    border-radius: 5px; /*закругляем углы для остальных браузеров*/  
    padding-left: 20px; /*отступ слева от ввода, чтобы текст не был на картинке(выбирать
по размеру картинки)*/  
    height: 20px; /*высота строки ввода*/   
    font-size: 13px; /*размер шрифта*/
}