Executar um css ao clicar em um input

[mzaidan 2]

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.

[Rafael Sirotheau 43]

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.

[mzaidan 2]

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.

[Rafael Sirotheau 43]

É gerado dinamicamente em que momento?

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