Produto
PRODUTO
Busca
O campo de busca permite que o usuário pesquise um determinado conteúdo dentro da relação de dados existentes no site.
Estados de interação
Os estados de interação indicados abaixo se replicam para todas as suas variações de tipo.
Default
Buscar
Hover
Buscar
Focus
Buscar
Preenchido
Buscar
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="search">
<input type="text" required />
<span class="floating-label">Buscar</span>
<span class="search-icon"></span>
</div>
SASS Exibir código
Copiar código
Exibir código
.search{
position: relative;
max-width: 300px;
width: 100%;
input {
width: 100%;
height: 60px;
border-radius: 4px;
background-color: #ffffff;
border: solid 1px #9b9b9b;
padding-left: 20px;
padding-top: 16px;
box-sizing: border-box;
font-size: 1em;
font-family: Lato;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
padding-right: 45px;
transition: .4s;
&:hover,
&.hovered{
border: solid 1px #3153f5;
}
&:focus,
&.focused{
border: solid 2px #3153f5;
box-shadow: none;
outline: none;
}
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 19px;
height: 24px;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
transition: 0.2s ease all;
}
.search-icon{
background-image: url(/img/search-icon.png);
background-size: 20px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 20px;
right: 20px;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
font-size: 0.6875em;
opacity: 1;
}
}