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.
Add a comment
|
4 Answers
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; }
5 Comments
SemperAmbroscus
i have the exact same except without the submit button lemme update the picture
SemperAmbroscus
check the new picture
SemperAmbroscus
i want the second one but i did the color: option and it didnt work
SemperAmbroscus
to elaborate my problem is not with the color of the text but the color of the words First name etc
assembly_wizard
To make the words "First Name" in a different color, that's the first chunk of code in my edit, Fiddle for your convenience
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">
7 Comments
SemperAmbroscus
and how to center it i tried position:center; in css
rockStar
position center the text? if that so, use
text-align:center;SemperAmbroscus
in my css i have
input { text-align:center; } but it doesn't work.SemperAmbroscus
that just centered the text inside the box
rockStar
check this jsfiddle, it is centered when u put that css in jsfiddle.net/B5vpj
|
Here's a working cross browser DEMO
You need input[placeholder] to target the placeholder element on some browsers.
Comments
I have centered it on the page by adding this to my css:
form {
text-align:center;
}