Add asterisk to required placeholder and labels

by Amy Ruddy

HTML

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Required Asterisk</title>
  </head>

  <body>
    <div class="my-5 border shadow" id="main">
      <div class="bg-white rounded">
        <div class="text-center py-2 rounded-top" id="form_header">
          <p><span class="far fa-copy"></span><strong> required</strong>fields</p>
        </div>
        <form class="container py-5">
          <div class="text-center pb-5">* Indicates a required field</div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="username">Email</label>
              <input type="text" class="form-control" id="username" placeholder="Email" required="requrequiredired">
            </div>
            <div class="form-group col-md-6">
              <label for="inputPassword4">Password</label>
              <input type="password" class="form-control" id="inputPassword4" placeholder="Password" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="inputCity">City</label>
              <input type="text" class="form-control" id="inputCity">
            </div>
            <div class="form-group col-md-4">
              <label for="inputState">State</label>
              <select id="inputState" class="form-control">
        <option selected>Choose...</option>
  ...

CSS

#main {
  max-width: 400px;
  margin: 0 auto;
}

#form_header,
.btn-primary {
  background-color: #316296 !important;
  color: #ffffff;
}

#form_header p {
  font-size: 1.8rem;
  margin: 0;
}

label > input[required="required"] {
    background: red; 
}