4 replies to this topic

[The-Pixel]

Hello,

I've been trying for some time to create my own custom login textareas. I'm not sure how to explain it but, click on this link ( http://www.the-pixel...Website_Example ) and you are able to see what I'm talking about. I want my own username and password to have that image background on them and able to work at the same time. Thank you very much for any help you can give me reguarding this matter.

[Ghost]

Just style them like normal with css.

input{
background: (image.gif) repeat-x;
border: 1px solid #e7e7e7;
color: #00577c;
margin: 0;
padding: 3px;
}

Something like that..

[The-Pixel]

I'm sorry Ghost I don't get what you mean. Could you please explain better. Thank you for your time in helping me.

[Ghost]

Do you have any experience with css? If not, the above code is basically just going to style any input tags you use in your design. To make it target the specific inputs, just change input to input.input and add class='input' to the fields you want to style.

Have you got the html code set up for your form yet? To be basic, you should be using something like

<form>
Username: <input type='text' value='Username' class='input' /><br />
Password: <input type='password' value='password' class='input' />
</form>

And this should be in your css document (or style tags at the top of your page - whatever you're using).

input.input{
background: (image.gif) repeat-x;
border: 1px solid #e7e7e7;
color: #00577c;
margin: 0;
padding: 3px;
}

image.gif is a repeating image for the background of your form. Ideally, it should be 1px in width and is just the grey/white gradient in the background of your inputs.

[The-Pixel]

Thank you for explaining it Ghost. I can understand it much better that way.