Check empty inputs with CSS

empty-input.css

input {
  width: 100%;
  font: inherit;
  padding: 0.25em 0.5em;
  border: 0.125em solid hsl(30, 76%, 10%); 
  outline: none;
}

/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);;
}

/* Show green borders when valid */
input:valid {
  border-color: hsl(120, 76%, 50%);
}

empty-input.html

<div class="input">
    <label for="input" >Label </label>
	<input type="text" name="input" id="input" required placeholder="Type something in here" pattern=".*\S.*">
</div>