placing an image in form input field

I'm trying to make a simple form input field with an image INSIDE the field on right corner, the开发者_运维技巧 image works as submit button. Here is my demo http://jsfiddle.net/BSXsY/ I want that image class (.button) inside the input field. Thanks for any help.

---

For astrik placing inside the input field you will need to add class.

Here is the code:

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

Respective CSS for the class:

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

---

By changing two things, I'm pretty sure I've done what you asked:

.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;
}

Note the height's changed to accommodate the image, may want to play with text size/alignment.