How to format text in input box with css

Question

I'm trying to change the font color of the placeholder text that appears in the input boxes before the visitor types any text.

Here's my example http://santa.parseapp.com/

See the text boxes at the bottom of the page. I think it's using a user agent stylesheet at the moment, which means the form elements dont have styles created?

I'm not sure which element I need to target with CSS. Here's what I've go:

form input[type=text] {
  width: 300px;
  margin-bottom: 7px;
  font-size: 20px;
  border: 0;
  padding: 5px 7px;
  background-color: #FF2950;
  color: #fff;
  }

Show what you have tried

Zword
– Zword

2013-11-30 10:09:27 +00:00
Commented Nov 30, 2013 at 10:09 — Zword
– Zword, Commented Nov 30, 2013 at 10:09
I've added the code where the input box is.

Dano007
– Dano007

2013-11-30 10:14:20 +00:00
Commented Nov 30, 2013 at 10:14 — Dano007
– Dano007, Commented Nov 30, 2013 at 10:14

Josh Hunt · Accepted Answer · 2013-11-30 10:21:03Z

2

It sounds like you're looking to style the placeholder text, yeah?

Generally speaking, placeholder text gets the same styling as the element itself, apart from the colour. So in your example, the placeholder text will be color: grey and font-size: 20px.

If you want to target the placeholder text specifically, you need to use the :placeholder psuedo-class:

::-webkit-input-placeholder {
   color: blue;
}

::-moz-placeholder {
   color: blue;
}

:-ms-input-placeholder {  
   color: blue;
}

answered Nov 30, 2013 at 10:21

Josh Hunt

14.5k26 gold badges83 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dano007 Over a year ago

I appreciate the constructive help.

Zword · Accepted Answer · 2013-11-30 10:23:22Z

0

Check this fiddle:

http://jsfiddle.net/7r2d9/1/

form input[type=text]:focus {
  color: black;
}

answered Nov 30, 2013 at 10:23

Zword

6,8013 gold badges30 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to format text in input box with css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related