<h1>Tipos de campos</h1>
<div class="campos">
  <!-- Campos -->
  <input id="text" type="text" value="" required/>
  <label for="text">Texto</label>
  <input id="checkbox" type="checkbox" checked required />
  <label for="checkbox">Checkbox</label>
  <input id="date" type="date" required />
  <label for="date">Data</label>
  <input id="email" type="email" required />
  <label for="email">E-mail</label>
  <input id="file" type="file" required />
  <label for="file">Arquivo</label>
  <input id="month" type="month" required />
  <label for="month">Mês</label>
  <input id="number" type="number" required />
  <label for="number">Número</label>
  <input id="password" type="password" required />
  <label for="password">Senha</label>
  <input id="radio" type="radio" required />
  <label for="radio">Rádio</label>
  <input id="search" type="search" required />
  <label for="search">Busca</label>
  <input id="tel" type="tel" required />
  <label for="tel">Telefone</label>
  <input id="time" type="time" required />
  <label for="time">Hora</label>
  <input id="url" type="url" required />
  <label for="url">URL</label>
  <input id="week" type="week" required />
  <label for="week">Semana</label>
</div>
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;800&display=swap');

body {
  font-family: 'Jost', sans-serif;
}

h1 {
  text-align: center;
}

.campos {
  display: flex;
  flex-direction: column;
  width: 20em;
  margin: auto;
}

label {
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  text-align: center;
}

input {
  margin: 1em 0 0.3em 0;
  border: 2px solid #ccc;
  border-radius: 0.5em;
  padding: 1em;
}

input:hover {
  background: #f8f8f8;
}

input:focus {
  border-color: #000;
}

input:valid {
  border-color: #090;
}

input:valid ~ label {
  color: #0c0;
}

input:invalid {
  border-color: #900;
}

input:invalid ~ label {
  color: #c00;
}

input:required ~ label::after {
  content: " (obrigatório)";
  font-size: 0.8em;
  color: #000;
}

input:invalid ~ label::after {
  content: " (inválido) ";
  font-size: 0.8em;
  color: #c00;
  margin-top: .5em
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.