<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:[email protected];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
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.