Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Como exibir condicionalmente o input outro assunto no caso de um select ao invés do radio

Olá, estou fazendo a seleção do assunto com um select mas não consigo exibir condicionalmente o input pro outro assunto caso a opção outro seja selecionada no select

<fieldset>
          <legend>Assunto:</legend>
          <select name="assunto" required>
            <option value="" disabled selected>Selecione o assunto...</option>
            <option value="Consult">Consultoria</option>
            <option value="Blog">Blog</option>
            <option value="Outro">Outro</option>
          </select>
          <input id="outro-assunto" type="text" name="outro-assunto" value="" placeholder="Digite o assunto...">
        </fieldset>

o css eu já oculto ele por padrão e estou testando as regras para exibi-lo:

`

#outro-assunto { display: none; } option[value="Outro"]:selected #outro-assunto { display: inline; }

7 respostas

Olá Bruno, tudo bem? Tente somente 'option[value=Outro]'. Aqui foi :)

Obs: há case sensitive então cuidado!

Oi João, obrigado pelo retorno...

Mas eu quero exibir o input outro-assunto que está com display none, você diz tentar assim?

option[value="Outro"] {
  display: block;
}

Entendi... Até onde eu sei não é possível manipular a página usando CSS puro, acredito que precisaria de uma função JS. É simples.

Obs: recomendo que use underscore ( _ ) ao invés de hífen ( - ) em seus ids. É uma boa prática :)

<!--Html-->
<select onchange="showInput(this.value)">
    <option value="A">a<option>
</select>

//Js
function showInput(value) {
    if(value == 'Outro') {
        document.getElementById('outro_assunto').classList.remove('hidden')
    } else {
        document.getElementById('outro_assunto').classList.add('hidden')    
    }
}

/*Css*/
.hidden {
    display: none;
}

Não é possível fazer apenas com CSS tendo essa estrutura para o HTML. O CSS não permite voltar na hierarquia das tags.

O CSS permite sim manipular a página, mas não permite manipular ancestrais, apenas descendentes ou irmãos. Se as tags <option> fossem irmãs da tag input seria possível acessá-la, mas não são. A tag input é tia das <option>s.

Opa João e Axell, valeu mesmo pelos retornos...

É que no curso de HTML 5 e CSS3, é passado algo muito parecido com raio e funciona, o css fica assim

input[outro] ~ input {
  display: none;
} 
input[value="Outro"]:checked ~ input {
    display: inline;
} 

O que eu quero é seguir a mesma filosofia pro select ao invés do radio

solução!

Sim, só que os operadores + ~ e > só conseguem acessar membros irmãos ou descendentes. Para conseguir acessar o input[name="outro-assunto"] seria necessário utilizar um operador que volte na tag pai e ai sim pegue os irmãos da tag pai. E até onde sei, não se tem esse operador.

Lembre-se que a estrutura do HTML era esta, em que o input "radio" era irmão do input "text":

<input type="radio" name="assunto" value="Outro" id="outro">
<label for="outro">Outro</label>
<input type="text" name="outro-assunto">

Na estrutura de HTML que você criou, a option[value="Outro"] não é irmã do input[name="outro-assunto"], mas sim sobrinha.

Entendi Axell, muito obrigado pela explicação...

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software