<h2>Change Input Placeholder Text with CSS</h2>
  <p>You can use the <code>::placeholder</code> pseudo-element to change the styles of the placeholder text, which includes the ability to change the background.</p>
  <p><input type="text" placeholder="Enter Your Name"></p>

  <p>The code in this example uses a Sass function to generate code for support in older browsers as well.</p>
input {
  display: block;
  margin: 0 auto;
  border: none;
  font-size: 1.5em;

$placeholder: ('::-webkit-input-placeholder', ':-moz-placeholder', '::-moz-placeholder', ':-ms-input-placeholder', '::input-placeholder', '::placeholder');
@each $selector in $placeholder {
  #{$selector} {
    font-style: italic;
    font-size: 1em;
    color: mintcream;
    background: thistle;
    padding: 5px;

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;

p {
  text-align: left;
  padding: 0 20px;

code {
  color: firebrick;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.