Estou testando conceitos de seletores CSS e quero alterar a cor de fundo do formulário para lightblueapenas quando um dos filhos receber o foco. Quero fazer isso usando apenas CSS. Não quero nenhum tipo de JavaScript. Aqui está o código:
*, ::before, ::after {
box-sizing: border-box;
padding: 0;
}
body {
background: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
padding: 50px;
color: #333;
}
form{
width:400px;
padding: 20px;
background-color:red;
margin:20px;
}
.label, .input {
display: block;
}
label {
margin-bottom: 3px;
}
input {
display: block;
padding: 5px;
min-width: 350px;
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid rgb(116, 116, 116);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Selectors</title>
</head>
<body>
<form>
<h3>Express your tastes</h3>
<label>Your favorite dish</label>
<input type="text" />
<label>Your favorite dessert</label>
<input type="text" />
<label>Your favorite pastry</label>
<input type="text" />
</form>
</body>
</html>Você pode querer usar :focus-withinpseudo-classe. Para seu exemplo, você deve adicionar:
form:focus-within {
background-color: lightblue;
}
Você pode ler mais sobre este seletor aqui
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras