Is there any way to use :Focus in div?

Question

I have a div who holds my input and Submit, I wanted to put an effect to make it cooler, only I tried to use it like this .search:Focus and it didn’t work, someone would know how I could put a Focus effect on that div ?

<div class="busca">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
</div>

Answer 1

For those looking for a simpler solution, CSS now has a selector called :focus-within whose objective is to select the parent element when a child element is under focus.

.busca:focus-within {
 /* Muda o background color da div pai */
 background: #fff;
}

Answer 2

If you focus on div, you can’t focus on input to type something.

Solution according to the comment tipo o usuario clica na div busca ai exibe uma borda e um background, it was said, click on the search div and not in algum elemento da div busca

In this case the solution is, like the other examples, to apply a style to div simulating focus

$(document).ready(function(){
       $(".busca").click(function(e){
           $(this).addClass("selected");
           e.stopPropagation();
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
       });
    });

.selected{
    box-shadow: 0 0 5px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 5px solid rgba(255, 255, 10, 10);
    background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="busca" id="onFocus">
        <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    <p>Faço parte da div</p>
    </div>

Other solutions

Example 2

<div class="busca"  onclick="this.style.cssText = 'border: 2px solid #96BED9;'">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

Example 3

    <div class="busca" onclick="this.style.cssText = 'box-shadow: 0 0 5px rgba(0, 0, 238, 1);padding: 3px 0px 3px 3px;margin: 5px 1px 3px 0px;border: 5px solid rgba(255, 255, 10, 10);'">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

style object

you can edit the CSS to apply the desired effect

Example 4 - use of Jquery. Complete solution because by clicking outside the div the style is removed

 $(document).ready(function(){
       $(".busca").click(function(e){
           $(this).addClass("selected");
           e.stopPropagation();
           document.getElementById('onFocus').style.backgroundColor = "red";
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
           document.getElementById('onFocus').style.backgroundColor = "";
       });
    });

.selected{
    box-shadow: 0 0 5px rgba(0, 0, 238, 1);

    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 5px solid rgba(255, 255, 10, 10);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="busca" id="onFocus">
        <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

---

The idea of applying focus to div that contains an input with data entry makes this input unfeasible (you will only be able to type if you keep the mouse pointer clicked on it).

See the example below

document.getElementById('onFocus').onclick = function () {
    document.getElementById('onFocus').focus();
};
  

div:focus {
  box-shadow: 0 0 5px rgba(0, 0, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 5px solid rgba(255, 255, 10, 10);
}

 <div class="busca" tabindex="-1" id="onFocus">
 <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

Example 5 - With background defined in CSS also works

 $(document).ready(function(){
       $(".busca").click(function(e){
           $(this).addClass("selected");
           e.stopPropagation();
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
       });
    });

.selected{
    box-shadow: 0 0 5px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 5px solid rgba(255, 255, 10, 10);
    background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="busca" id="onFocus">
        <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

Answer 3

If the idea is to apply some style in div when one of the fields gets the focus, I would indicate using the event itself focus of input and access to div through the attribute parentElement.

See below for an example that changes the background color of div when the field receives the focus. Note that it will work independently of the way the focus is given to the field, be it navigation by tabs or self focus.

const busca = document.getElementById("busca");
const inputs = busca.getElementsByTagName("input");

for (const input of inputs) {
  input.addEventListener("focus", function (event) {
    this.parentElement.style.background = "green";
  });
  
  input.addEventListener("blur", function (event) {
    this.parentElement.style.background = "none";
  });
}

<div id="busca">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
</div>

Answer 4

"The global attribute tabindex indicates whether an element can receive input focus (if it is focusable), whether and at what position it should be part of the keyboard sequential navigation (usually with the Tab key, hence its name). It accepts integer values with different results depending on the value:

a negative value (usually tabindex="-1") means that the element must be focusable but not localized by sequential keyboard navigation; tabindex="0" means that the element must be focusable and that it can be located by sequential keyboard navigation, but its position will be defined by the order in the document source code; a positive value means that the element must be focusable and can be located by sequential keyboard navigation, and its position defined by the value of the number. So, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If several elements have the same positive value of tabindex, their position in the sorting will be defined by their position in the source code of the document."

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex