Change the FORM border when the internal INPUT is in focus

Question

It may be something kind of stupid or even a double question, but like everything I know about css is tested and I have no idea how to google, I decided to ask this question.

The thing is, I have the following form:

    <form class="form-inline my-0 my-lg-0 lozano-search">
        <input type="search" placeholder="buscar" aria-label="Buscar">
        <button type="submit"><img src="images/icon-search.svg"></button>
    </form>

With the following css:

    .lozano-search {
        padding: 5px;
        border-radius: 10px;
        max-width: 200px;
        border: 2px solid #CCCCCC;
    }

That generates this result:

I want to change the parent element, in this case the form when the input is in focus, like this:

    .lozano-search input:focus .lozano-search{
       border: 2px solid #F67300;
    }

To get that result:

Answer 1

That’s exactly what the pseudo-class :focus-within. With her focusing on some "focusable element" within the form you can style your own form, you can read the Mozilla documentation about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:Focus-Within

Here is the example of the image above:

.lozano-search {
    padding: 5px;
    border-radius: 10px;
    max-width: 200px;
    border: 2px solid #CCCCCC;
}
.lozano-search:focus-within {
    border: 2px solid #ff0000;
}

<form class="form-inline my-0 my-lg-0 lozano-search">
    <input type="search" placeholder="buscar" aria-label="Buscar">
    <button type="submit"><img src="images/icon-search.svg"></button>
</form>

---

OBS

The point is you can’t control which one input, button, link, etc will activate the :focus-within of form parent, ie if the form has 5 inputs, any of them receiving the focus will activate the form Dad, or if you focus on a <button> tb will activate the form Dad, you can read more about it on this unanswered question: With CSS it is possible to control which element will activate the Focus-Within of a Form?

In the above case the positive point is that you do not need the button inside the form to do the submit, it can be in qq place and even so clicking on it you can send the form, is a way for you to try to work around this behavior.

---

TIP

In this other answer there is a more sophisticated example that may interest you, at least for you to better understand the pseudo-class and the possibilities that it offers: Change parent properties if CSS child exists

Answer 2

Thus?

Form:

<form class="form-inline my-0 my-lg-0 lozano-search">
   <input class="input-pesquisa" type="search" placeholder="buscar" aria-label="Buscar">
   <button type="submit"><img src="images/icon-search.svg"></button>
</form>

Css:

.input-pesquisa:focus{
   border: 2px solid #F67300;
}