6

Tenho um div que segura meu input e submit, ai queria colocar um efeito pra ficar mais legal, só que eu tentei usar assim .busca:focus e não funcionou, alguém saberia como eu poderia colocar um efeito focus nessa 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>
3
  • Você quer aplicar um estilo na div quando o input receber o foco?
    – Woss
    5/10/2017 às 0:35
  • Bem-vindo, faça um tour começando por esse post pt.meta.stackoverflow.com/questions/1078/…
    – user60252
    5/10/2017 às 1:14
  • sim, tipo o usuario clica na div busca ai exibe uma borda e um background, os exemplos abaixo alguns funcionam mais não chegaram no ponto que eu preciso
    – goio
    5/10/2017 às 19:22

3 Respostas 3

6

Pra quem busca uma solução mais simples, agora o CSS possui um seletor chamado :focus-within cujo objetivo é selecionar o elemento pai quando um elemento filho sofre o foco.

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

Se você der foco à div, não será possível dar foco ao input para digitar algo.

Solução de acordo com o comentário tipo o usuario clica na div busca ai exibe uma borda e um background, foi dito, clica na div busca e não em algum elemento da div busca

Nesse caso a solução é, como os demais exemplos, aplicar um estilo a div simulando foco

$(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>

Outras soluções

Exemplo 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>

Exemplo 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

você poderá editar o CSS apara aplicar o efeito desejado

Exemplo 4 - uso de Jquery. Solução completa pois ao clicar fora da div o estilo é removido

 $(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>


A idéia de aplicar foco a div que contem um input com entrada de dados faz este input ficar inviabilizado (só vai conseguir digitar se mantiver o ponteiro do mouse clicado nele).

Veja o exemplo abaixo

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>

Exemplo 5 - Com background definido no CSS também funciona

 $(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>

12
  • Antes de vc editar a resposta estava mais legal ao clicar fora da div e voltar ao normal. :)
    – Sam
    5/10/2017 às 2:05
  • @Dvdsamm coloquei o exemplo explicando o porque não rola :focus em div
    – user60252
    5/10/2017 às 2:09
  • Legal. De qq forma acho bobo querer fazer focus em div rs... mas essa era a pergunta neh, fazer oq. Mas sua resposta ficou completa. +1
    – Sam
    5/10/2017 às 2:12
  • o exemplo de clicar fora do div é mais legal, porém não funciona se colocar um background, e eu precisaria que mudasse a borda e o background
    – goio
    5/10/2017 às 19:27
  • Aqui só funcionou com o box-shadow tentei colocar o background porém não obtive sucesso
    – goio
    6/10/2017 às 2:24
0

Se a ideia é aplicar algum estilo na div quando um dos campos recebe o foco, eu indicaria utilizar o próprio evento focus do input e acessar a div através do atributo parentElement.

Veja abaixo um exemplo que altera a cor de fundo da div quando o campo recebe o foco. Perceba que funcionará independente da forma que o foco é dado ao campo, seja navegação por tabs ou auto foco.

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .