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>
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP