CODEWITHSUNDEEP
cssformsinput
Lucka
Lucka

Reputation: 343

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.

Upvotes: 0

Views: 4298

Answers (2)

Gautam
Gautam

Reputation: 1696

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

Upvotes: 6

Brad Christie
Brad Christie

Reputation: 101614

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.

Upvotes: 0

Related Questions