Jump to content

How to do this?


LiamProductions

Recommended Posts

give your input field a class, eg class="mytextfield":

<input type="text" name="textfield" class="mytextfield">

 

Then in your stylesheet/embed css. You'll use the following css:

.mytextfield {
    background-image: url(path/to/bg/image);
}

That'll apply a background image to your text field.

 

You could also do:

input.mytextfield {
    background-image: url(path/to/bg/image);
}

That will do the same, however it'll tell the browser to only apply the background to input tags that have a class name of mytextfield.

Link to comment
Share on other sites

or better yet apply the background right to the tag, e.g.,

 


input {
  background: transparent url(my_image.jpg) repeat;
}

 

assuming you want all of your inputs to look the same.  I usually style my forms for the section they are in.

 

for example if I have left or right columns or the main content area I may have something like

 


#left input {
...
}

#right input {
...
}

#content input {
...
}

 

and in my html of course something like

 


<div id="left"><form><fieldset><input ... /></fieldset></form>

 

you get the idea I hope.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.