With CSS is it possible to control which element will activate the Focus-Within of a Form?

Asked

Viewed 155 times

4

Is there any way to determine with CSS only which elemento focused on specific will activate the :focus-within of form? I want only one input specifically activate the class form:focus-within {} of form.

From what I understood any element that is focused within the form will already activate the rule form:focus-within {}, but I wish only the last input of form activate that class.

Here’s an example, see that regardless of the input that I click the form already recognizes that one of the inputs within it was focado. But I’d like to control that by changing the :focus-within of form only when the last input for focado.

This is possible only with 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>

html5 css3 form ui
  • 3

    If instead they had developed this level 4 selector, they would have opted for the :has(), a lot would be solved, beyond your need here :) ... although I don’t know if :has would support something like :has(input:focus)

  • @Guilhermenascimento you understood well the point, the idea was to use the input son to style the parent form, until it works, only that I wanted to try to control which son controls the parent, the way that is at the moment qq active the parent :/, with CSS I think we’ll have to wait for some new specification

  • 2

    i highly doubt that with pure CSS will achieve something, unfortunately only JS for now

1 answer

-2

Hi, long time ago but I don’t know if you made it, try this

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>

  • 1

    How so friend? I guess you didn’t understand the question, I want only the last form input to activate the form’s Focus-Within style... It has nothing to do with nth-child(). Note that in your own example when I click on the first input it already activates the form style, which is just what I want to avoid

  • Hello, so explain better, when do you want to activate? at what point? by clicking on the form? will you focus the last input? and if the person click on the first what is to happen? I believe that explaining the action can better interpret.

  • Perhaps you did not see this phrase in the question https://prnt.sc/w7sz0z I believe the explanation there was enough. But feel free to update your answer if you arrive at a solution to the problem presented in detail in the question

Browser other questions tagged html5 css3 form ui

You are not signed in. Login or sign up in order to post.