4.1 Pseudoclasse :checked
As pseudoclasses de formulário no CSS oferecem possibilidades de estilização para elementos do formulário dependendo do estado deles. Essas pseudoclasses permitem criar formulários interativos e acessíveis, aprimorando a interface e a experiência do usuário. Vamos ver mais de perto as pseudoclasses :checked, :disabled, :enabled e :invalid.
A pseudoclasse :checked é aplicada a elementos do formulário que estão no estado "selecionado". Isso se refere a checkboxes (<input type="checkbox">), botões de rádio (<input type="radio">) e opções (<option>).
Sintaxe:
seletor:checked {
propriedades: valores;
}
Exemplo de uso
Neste exemplo, os checkboxes, botões de rádio e opções selecionadas recebem a cor de fundo correspondente quando estão no estado "selecionado":
/* Estilização do checkbox selecionado */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Estilização do botão de rádio selecionado */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Estilização da opção selecionada */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudoclasse :disabled
A pseudoclasse :disabled é aplicada a elementos do formulário que estão no estado desabilitado. Isso é útil para estilizar elementos que estão temporariamente indisponíveis para interação.
Sintaxe:
seletor:disabled {
propriedades: valores;
}
Exemplo de uso
Neste exemplo, os campos de entrada e botões desabilitados recebem a cor de fundo, borda e texto correspondentes, além de alterar o cursor para "não permitido":
/* Estilização do campo de entrada desabilitado */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Estilização do botão desabilitado */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudoclasse :enabled
A pseudoclasse :enabled é aplicada a elementos do formulário que estão no estado habilitado. Isso permite estilizar elementos que estão disponíveis para interação.
Sintaxe:
seletor:enabled {
propriedades: valores;
}
Exemplo de uso
Neste exemplo, os campos de entrada e botões habilitados recebem a cor de fundo, borda e texto correspondentes, além de alterar o cursor para "ponteiro":
/* Estilização do campo de entrada habilitado */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Estilização do botão habilitado */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudoclasse :invalid
A pseudoclasse :invalid é aplicada a elementos do formulário que não passaram pela validação. Isso permite estilizar campos de entrada que contêm dados incorretos.
Sintaxe:
seletor:invalid {
propriedades: valores;
}
Exemplo de uso
Neste exemplo, os campos de entrada e áreas de texto incorretos recebem a cor de borda e fundo correspondentes, para mostrar visualmente que os dados não passaram pela validação:
/* Estilização do campo de entrada incorreto */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Estilização da área de texto incorreta */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Exemplo de implementação completa
/* Estilização do checkbox selecionado */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Estilização do botão de rádio selecionado */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Estilização do campo de entrada desabilitado */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Estilização do botão desabilitado */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Estilização do campo de entrada habilitado */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Estilização do botão habilitado */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Estilização do campo de entrada incorreto */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Estilização da área de texto incorreta */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de pseudoclasses de formulário</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION