Existe alguma forma de determinar apenas com CSS qual elemento
focado em específico vai ativar o :focus-within
do form
? Quero que apenas um input
em específico ative a classe form:focus-within {}
do form
.
Pelo que percebi qualquer elemento que for focado dentro do form
já vai ativar a regra form:focus-within {}
, porém eu gostaria que apenas o último input
do form
ativasse essa classe.
Aqui tem um exemplo, veja que independente do input
que eu clico o form
já reconhece que um dos inputs
dentro dele foi focado
. Porém eu gostaria de controlar isso, mudando o :focus-within
do form
apenas quando o último input
for focado
.
Isso é possível só com CSS?
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ff8;
color: black;
}
form:focus-within::after {
content: "Confira as informações antes de enviar!";
display: block;
font-size: 20px;
color: red;
}
input {
margin: 4px;
}
<form>
<label for="name">Name:</label>
<input id="name" type="text" autocomplete="off">
<br>
<label for="number">Number:</label>
<input id="number" type="number" autocomplete="off"> <b>quero que apenas esse input ative o focus-within</b>
</form>
:has()
, muita coisa se resolveria, além da sua necessidade aqui :) ... apesar que não sei se o :has suportaria algo como:has(input:focus)