Entrar Ainda não tem acesso?
1
resposta

Form 'Outro' não desaparece e reaparece ao selecionar

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.9k 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
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.