MD - INPUT - REQUIRED - ALERT COLORING

by bizamajig

HTML

<input type="text" placeholder="Required" required>

<textarea placeholder="Required" required></textarea>

CSS

body {
  background-color: rgb(0,159,214);
  font: normal 1em Helvetica,Arial;
  padding: 2em;
}
input[type="text"], textarea {
  background-color: #eee;
  border: none;
  border-radius: .125em;
  display: block;
  font: inherit;
  font-size: 1.5em;
  line-height: 2em;
  margin: .5em auto;
  padding: 0 .5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}
input[type="text"][required] {
  background-image: linear-gradient(0deg, transparent, transparent 50%, green 50%, green 100%);
  background-position: top right;
  background-size: .2em 15em; /* .5em .5em; */
  background-repeat: no-repeat;
}
textarea[required] {
  background-image: radial-gradient(red 20%, transparent 25%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}