Form 'Outro' não desaparece e reaparece ao selecionar | HTML5 e CSS3 II: Turbinando as suas páginas

1
resposta

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Formulários e atividade Melhorando a usabilidade com truques CSS

por Filipe Lopes de Andrade

| 127.8k xp | 15 posts

Desenvolvedor Java/Android Jr

Galera, boa noite.

Estou com um problema que acredito que seja no Vscode ou no código mesmo, pois mesmo com a resposta aplicada, não funciona a seleção via tag 'option' . Notei que todos os ascentos de seletores avançados que tento utilizar no Vscode não funcionam.

CSS:

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

HTML

                        <select name="select">
                            <option name="assunto" value="servico" checked>Serviço</option>
                            <option name="assunto" value="blog">Blog</option>
                            <option name="assunto" value="outro">Outro<input value="outro" spellcheck="default" placeholder="Digite o assunto específico"></option>
                        </select>

Poderiam me dar um help ? Obrigado desde já !

1 resposta

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

02/03/2020

Fala ai Filipe, tudo bem? Seus códigos possuem alguns pequenos problemas, vamos vê-los:

No lugar do select, você deveria utilizar um input com o type igual à radio, ficando:

<label>
  <input type="radio" value="Outro">
  Outro
  <input type="text">
</label>

Seu CSS está buscando pelo value outro, mas, repare no HTML que o value do input é igual à Outro, ou seja, o primeiro O precisa estar em maiúsculo, ficando:

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

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

Com essas alterações o mesmo deve funcionar como no curso.

Espero ter ajudado.