Campo de Entrada
Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 52 de 76.
Desafio
FácilNesta lição, vamos melhorar a aparência dos campos de entrada para torná-los fáceis de usar.
Estilize os campos <input>. Siga as etapas abaixo:
- Deixe-os com 100% de largura para que se ajustem bem ao formulário.
- Adicione preenchimento para que o texto dentro deles não encoste nas bordas.
- Aplique uma borda com uma cor suave.
- Deixe os cantos arredondados.
- Adicione um pouco de margem entre os campos de entrada para que não pareçam muito próximos uns dos outros.
- Use box-sizing: border-box; para que a largura inclua o preenchimento e as bordas.
Experimente você mesmo
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Todas as lições de Estilização com CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento do TextoDecoração do TextoDesafio de Revisão nº 1Desafio de Revisão nº 27Modelo de Caixa — Parte 1
O que é o Modelo de Caixa?PreenchimentoMargensBordasLargura e AlturaDesafio de Revisão
8Modelo de Caixa — Parte 2
Dimensionamento da CaixaRaio da BordaTransbordamentoSombra da CaixaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é uma Flex Box?Direção da Flex BoxJustificar conteúdoAlinhar itensO centro perfeitoDesafio da Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta tag viewportLayouts fluidosUnidades de viewportFundamentos das Media QueriesImagens flexíveisPratique por conta própria: Playground de Web