TransWikia.com

Com CSS é possível controlar qual elemento vai ativar o Focus-Within de um Form?

Stack Overflow em Português Asked by hugocsl on February 8, 2021

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>

One Answer

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>

Answered by Paulo Vaz on February 8, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP