Вам не нужен элемент div, вы можете назначить фон для ввода напрямую.
Редактировать: Вот рабочий код. Я проверил это, но вам придется настроить его под свои нужды. Насколько я могу судить, здесь все нужно.
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
Edit2: Я не совсем уверен, почему мне отказывают в голосовании, но этот метод должен работать, если вам не нужно изображение больше, чем сам элемент ввода. В этом случае вы должны использовать дополнительный элемент div. Однако если размер изображения совпадает с размером ввода, дополнительная разметка не требуется.
Edit3: Хорошо, после того, как Бобинс указал на проблему, я становлюсь немного ближе. Это будет работать в IE6 & 7 и близко к FF, но я все еще работаю над этой частью.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4 : Хорошо, я думаю, что получил его на этот раз, но он требует использования селектора CSS3, поэтому он не будет проверяться как CSS 2.1.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
body> input будет предназначаться для всего, кроме IE6, body> input: enabled будет предназначаться для любых элементов формы, которые отключены не для всех браузеров, кроме IE 6, 7 и 8. Однако, потому что: enabled это CSS3-селектор , он не проверяется как CSS2.1. Я не смог найти подходящий селектор CSS2, который позволил бы мне отделить IE7 от других браузеров. Если проблема не в проверке (пока, пока валидатор не переключится на CSS3), это проблема для вас, тогда я думаю, что ваш единственный вариант - дополнительный элемент div.