размещение изображения в поле ввода формы

Question

Я пытаюсь сделать поле ввода простой формы с изображением ВНУТРИ поля в правом углу, изображение работает как кнопка отправки. Вот мое демо http://jsfiddle.net/BSXsY/ Я хочу, чтобы этот класс изображения (.button) внутри поля ввода. Спасибо за любую помощь.

Answer 1

Для размещения астрика внутри поля ввода вам нужно будет добавить класс.

Вот код:

<input type="text" class="astrik"/>

Соответствующий CSS для класса:

.astrik
{
     background-image: url('../images/red_asterik.png');
     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-position: right;
     background-position-x: 98%;
}

Answer 2

Изменяя две вещи, я почти уверен, что сделал то, что вы просили:

.searchinput {
    color: #666666;
    font-size: 13px;
    padding-left: 2px;
    top: 5px;
    width: 200px;

    /* Additions (or rather copies) */
    background: url("http://img696.imageshack.us/img696/8137/13133747.jpg") right no-repeat;
    height: 25px;
}

Обратите внимание, что высота изменена в соответствии с размером изображения, может потребоваться воспроизведение с размером / выравниванием текста.