<main>
  <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>
</main>

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;
}