6

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>

3
  • 3
    Se ao invés deles terem desenvolvido esse seletor level 4, tivessem optado pelo :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)
    – Syzoth
    Commented 28/05/2019 às 15:27
  • @GuilhermeNascimento vc entendeu bem o ponto, a ideia era usar o input filho para estilizar o form pai, até funciona, só que eu queria tentar controlar qual filho controla o pai, da forma que está no momento qq filho ativa o pai :/, com CSS acho que vamos ter que esperar alguma nova especificação
    – hugocsl
    Commented 28/05/2019 às 15:30
  • 2
    eu duvido muito que com CSS puro conseguirá algo, infelizmente só JS por enquanto
    – Syzoth
    Commented 28/05/2019 às 15:39

3 Respostas 3

-1

Não é possível fazer isso apenas com CSS. O :focus-within seleciona o elemento pai mais próximo quando qualquer um dos seus filhos estiver em foco. Para controlar isso, você pode adicionar uma classe JavaScript para o último input quando ele estiver em foco e, em seguida, usar essa classe para ativar a regra de estilo desejada no formulário.

-2

OI, faz tempo porém não sei se conseguiu, tente esse

form {
    border: 1px solid;
    color: gray;
    padding: 4px;
}

form:focus-within input:nth-child(5) {
    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>

3
  • 1
    Como assim amigo? Acho que vc não entendeu a pergunta, eu quero que só o último input do form ative o estilo do focus-within do form... Não tem nada a ver com nth-child(). Repare que no seu próprio exemplo quando eu clico no primeiro input ele já ativa o estilo do form, que é justamente o que eu quero evitar
    – hugocsl
    Commented 22/12/2020 às 10:55
  • Olá, então explique melhor, quando vc quer que ative? em que momento? ao clicar no form? vai focar o último input? e se a pessoa clicar no primeiro o que é para acontecer? acredito que explicando a ação posso interpretar melhor.
    – Paulo Vaz
    Commented 22/12/2020 às 11:59
  • Talvez vc não tenha visto essa frase na pergunta prnt.sc/w7sz0z acredito que a explicação lá foi o suficiente. Mas sinta-se a vontade para atualizar a sua resposta caso chegue em uma solução para o problema apresentado em detalhes na pergunta
    – hugocsl
    Commented 22/12/2020 às 12:45
-3

Olá! Tente colocar o atributo autofocus no último input do seu body, logo irá focar automaticamente nele quando você entrar na página. Obs.: Não sei se era isso que você queria, mas espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .