How to customize html text fields

Question

I am making a login script that has six text fields the problem is it looks like this:

How do you center it and make the words apear inside the box?

EDIT: all I'm looking for currently is how to have the text in the box a certain color.

Answer 1

its called placeholder , where you say words appear inside the text box. Its an HTML5 attribute. Here's how you use it

<input type="text" placeholder="Username"> 

Answer 2

Here's a working cross browser DEMO

You need input[placeholder] to target the placeholder element on some browsers.

Answer 3

If you were just looking for a cool design, here's what I came up with:

Fiddle

Here is the HTML:

<form id="signup">
    <input type="text" placeholder="First Name" required="required" />
    <input type="text" placeholder="Last Name" required="required" />
    <input type="email" placeholder="Email" required="required" />
    <input type="email" placeholder="Confirm Email" required="required" />
    <input type="password" placeholder="Password" required="required" />
    <input type="password" placeholder="Confirm Password" required="required" />
    <input type="submit" />
</form>

The styling you're gonna have to see for yourself..

:D

EDIT: To make the words inside appear in a certain color, put this in your CSS code -

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder           { color: #999; }
::-moz-placeholder          { color: #999; }
:-ms-input-placeholder      { color: #999; }

(Obviously, change the #999 to the color of your choice.)

That would cause the placeholder 's to appear in a certain color. If you were talking about the color of the text written, then just use

input { color: #999; }

Answer 4

I have centered it on the page by adding this to my css:

form {

    text-align:center;
}