How to put a:Phocus effect on div

Question

I’m 5 input and each one stays within one div, would like to know how to put an effect phocus in each div that holds the input and by clicking off the div remove the effect.

<div class="input">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome..."
 </div>

Answer 1

As said in the previous post "If you focus on div, you won’t be able to focus on input to type something" the solution is to apply a style to div simulating focus.

In HTML put us ids of divs the respective CSS classes.

In the script recover this value to be applied in the function addClass

$(document).ready(function(){
    $(".busca").click(function(){
       var status = $(this).attr('id');
       $(this).addClass(status);
    });
    
    $(document).mouseup(function(e){
    var container = $(".busca");
    if (!container.is(e.target))  
    {
       //procura elementos cuja ID começa por uma dada string, neste caso estilo
       //https://api.jquery.com/attribute-starts-with-selector/
       $('div[id^="estilo"]').removeClass(); 
    }
	});
 
});

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

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

.estilo3{
    box-shadow: 0 0 36px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 2px solid rgba(25, 25, 10, 10);
    background-color: yellow !important;
}

.estilo4{
    border: 2px solid #96BED9;
    background-color: gray !important;
}

.estilo5{
    border: 4px solid #FF00FF;
    background-color: azure !important;
}

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


<div id="estilo1" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
 
 <div id="estilo2" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
 
 <div id="estilo3" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
 
  <div id="estilo4" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
  
  <div id="estilo5" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>

Note: the effect is by clicking on any part of the div and not in um elemento especifico dentro da div review previous post

Answer 2

I don’t think the focus event on div has anything to apply. But you can get what you are looking for with javascript, using this example would be like this:

function fOnFocus(){
     this.parentNode.classList.add("div-focus");
}

function fOnBlur(){
     this.parentNode.classList.remove("div-focus");
}

var inputs = document.querySelectorAll(".txt");

for (var indice = 0; indice < inputs.length; indice++) {  
  var input = inputs[indice];
  input.onfocus = fOnFocus;
  input.onblur = fOnBlur;
}

Then simply create a div-Focus class in your CSS.