Template CSS para campos de entrada: estilizando com border-radius e padding
📝 Uso
Este template é usado para adicionar border-radius e padding a um campo de entrada.
📘 Explicação
Este código usa `border-radius` para arredondar os cantos do campo de entrada e `padding` para ajustar o espaço interno. A regra `input:focus` altera a cor da borda quando o campo de entrada é focado.
O contorno é exibido fora do elemento. Ao contrário da borda, ele não afeta o tamanho do elemento.
Alcance do impacto: O contorno é usado principalmente para efeitos visuais. Mesmo quando o contorno é exibido, o espaço ao redor do elemento não muda.
Métodos de ajuste: O contorno pode ser configurado usando outline-width, outline-color, outline-style, etc.
input:focus {
outline-color: #3498db; /* Alterar a cor do contorno quando em foco */
outline: none; /* Remover o contorno */
}
Além disso,
Você também pode alterar o outline-color usando input:focus.
🔹 Código Parcial
<style>
/* Decoração do campo de entrada */
input {
border-radius: 8px; /* Cantos arredondados */
padding: 10px 15px; /* Preenchimento interno */
font-size: 16px; /* Tamanho da fonte */
border: 2px solid #ccc; /* Borda */
transition: all 0.3s ease;
}
/* Estilos para o campo de entrada em foco */
input:focus {
border-color: #3498db; /* Cor da borda ao focar */
outline: none; /* Remover o contorno ao focar */
}
</style>
💻 Código Completo
<input type="text" placeholder="Digite seu nome" />
<style>
/* Decoração do campo de entrada */
input {
border-radius: 8px; /* Cantos arredondados */
padding: 10px 15px; /* Preenchimento interno */
font-size: 16px; /* Tamanho da fonte */
border: 2px solid #ccc; /* Borda */
transition: all 0.3s ease;
}
/* Estilos para o campo de entrada em foco */
input:focus {
border-color: #3498db; /* Cor da borda ao focar */
outline: none; /* Remover o contorno ao focar */
}
</style>
🎨 Técnicas práticas para design de campos de entrada
O estilo dos campos de entrada é um elemento crucial que impacta diretamente a experiência do usuário. Combinando adequadamente border-radius e padding, é possível criar formulários fáceis de usar e visualmente atraentes.
📏 Pontos chave para dimensionamento ideal
padding: 10px 15px é um tamanho padrão, mas em dispositivos móveis, aumentar para padding: 12px 16px facilita a interação por toque. Valores apropriados para border-radius variam entre 4px e 12px, devendo ser ajustados para se adequar ao estilo de design do site.
🌈 Variações no design de cores
A border-color no foco pode ser alterada para combinar com o tema de cores do site, como #3498db (azul), #4CAF50 (verde) ou #FF7043 (laranja). Para suporte ao modo escuro, use @media (prefers-color-scheme: dark) para especificar uma cor de borda mais clara.
✨ Aprimorando a interação
Adicionar box-shadow à propriedade transition e definir box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3) em input:focus proporciona um efeito de foco mais destacado. No entanto, é importante manter as animações sutis.
O design dos campos de entrada deve priorizar a funcionalidade e ao mesmo tempo harmonizar com o sistema de design geral do site. Especialmente em páginas com formulários longos, manter estilos consistentes melhora a usabilidade.