Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mzaidan

Executar um css ao clicar em um input

Recommended Posts

Prezados, seguinte:

input type="text" class="search" class="input" id="searchid" placeholder="Digite em inglês ou português" onclick="showUp();">

Preciso que, ao clicar nesse input, um css seja ativado.

Tem como?

.input:focus ~ .conteudo {
  opacity: .3;
}

.conteudo {
    margin: 10px 0;
    padding: 5px;
    background-color: #ffffff;
}

Grato.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O ideal é, no javascript, adicionar/remover uma classe ao elemento 'wrapper' que fará essa estilização. No caso, o elemento 'wrapper' era uma div. Veja:

http://jsfiddle.net/j75kfmwc/


Obs, Troquei o onclick por onfocus/onblur para poder ativar/desativar no foco ao invés do click.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, não ta dando.

Não sei por que.

Peguei extamente o mesmo código e não consegui.

Segue:

<div class="content">

 <img src="por-ing.fw.png"><br>
  <input type="text" class="search" class="input" id="searchid" placeholder="Digite em inglês ou português"  onfocus="ativar()" onblur="desativar()" />
 
 <div align="justify" id="result">

 </div>
 </div>
javascript:

function ativar() {
    event.target.parentNode.classList.add('ativado');
}
function desativar() {
    event.target.parentNode.classList.remove('ativado');
}
CSS:

 

<style type="text/css">

input:focus ~ .conteudo {
  opacity: .3;
}

.ativado .conteudo {
    margin: 10px 0;
    padding: 5px;
    background-color: #ffffff;
}

</style>
Qual será o erro?°

---

o <div class="conteudo">

É gerado dinamicamente.

Tentei colocar outro input e deu certo.

Só não ta pegando nesse ai :(

Erro meu.

A div tava antes da area que eu queria que ficasse opaca.

Valeu, mestre.

Compartilhar este post


Link para o post
Compartilhar em outros sites

É gerado dinamicamente em que momento?

Poste como fica o HTML apos a inserção da div.conteudo

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.