Страницы

Поиск по вопросам

понедельник, 24 декабря 2018 г.

Картинка в инпуте

Здравствуйте!
Мне нужно сделать вот такую штуку:

А получается как то так:

Как исправить эту ситуацию? Заранее благодарен за любую помощь! input.contacts { font-family: "MullerRegular", sans-serif; font-size: 13px; padding: 10px 126px 10px 40px; margin: 20px; } div.inputname { background: url("../img/contact/human.png"); background-repeat: no-repeat; width:55px; height:55px; position: relative; display: inline; } div.inputphone { background: url("../img/contact/phone.png"); background-repeat: no-repeat; display: inline; width:55px; height:55px; position: relative; } div.inputemail { background: url("../img/contact/mail.png"); background-repeat: no-repeat; display: inline; width:55px; height:55px; position: relative; }



Ответ

Используйте background-position для установки позиции фонового изображения:
input.contacts { font-family: "MullerRegular", sans-serif; font-size: 13px; padding: 10px 126px 10px 40px; margin: 20px; background: transparent; box-shadow: none; border: #ccc solid 1px; } div.inputname { height: 55px; position: relative; display: inline; } div.inputname input { background: url('https://i.stack.imgur.com/GYpu2.png'); background-repeat: no-repeat; background-position: 10px center; } div.inputphone { display: inline; height: 55px; position: relative; } div.inputphone input { background: url('https://i.stack.imgur.com/wp8iA.png'); background-repeat: no-repeat; background-position: 10px center; } div.inputemail { display: inline; height: 55px; position: relative; } div.inputemail input { background: url('https://i.stack.imgur.com/JtqeI.png'); background-repeat: no-repeat; background-position: 10px center; }


Комментариев нет:

Отправить комментарий