TryIt Editor v2.0 - CSS ::placeholder code example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        margin: 20px auto;
        max-width: 250px;
        background-color: #8ebf42;
        padding: 20px;
      }
      input {
        border: 1px solid #666666;
        background-color: #eeeeee;
        padding: 15px;
        margin-bottom: 20px;
        display: block;
        width: 100%;
      }
      input::-webkit-input-placeholder {
        color: #666666;
      }
      input::-moz-placeholder {
        color: #666666;
      }
      input:-ms-input-placeholder {
        color: #666666;
      }
      input::placeholder {
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>::placeholder selector example</h2>
    <div class="container">
      <form>
        <input type="text" placeholder="Lorem ipsum is simply...">
        <input type="date" placeholder="DD/MM/YYYY">
      </form>
    </div>
  </body>
</html>