Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style text input placeholder [duplicate]

Tags:

css

Possible Duplicate:
Change an input’s HTML5 placeholder color with CSS

Is there anyway to style the color of a placeholder in a text input? Right now I'm stuck with the boring default grey.

like image 837
jacobgelman Avatar asked Jan 31 '13 01:01

jacobgelman


People also ask

Can you style placeholder text?

Definition and Usage. The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

How do I change the text style of a placeholder?

In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector.

How do I change placeholder text in CSS?

Change Input Placeholder Text with CSS You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background. The code in this example uses a Sass function to generate code for support in older browsers as well.


1 Answers

You sure can http://css-tricks.com/snippets/css/style-placeholder-text/.

(from the above article)

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

:-moz-placeholder { /* Firefox 18- */
    color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
    color: red;  
}

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

Or check MDN https://developer.mozilla.org/en-US/docs/CSS/:-moz-placeholder

like image 62
wbrady Avatar answered Nov 16 '22 01:11

wbrady