:checked no select

Fala aí Tiago, tudo bem? O que você está precisando fazer? O :checked possuí um comportamento diferente e talvez ele não seja o ideal para o que você está querendo fazer.

Fico no aguardo.

Boa noite, Tiago! Como vai?

Para esse tipo de situação o CSS sozinho não irá consolver a questão! Vc precisará lançar mão também de JS. Isso ocorre pois o CSS não possui um seletor que permita relacionar o option com o input ( bom, se existir esse tipo de coisa eu desconheço! hahahahaha )!

Basicamente a função JS terá que observar as mudanças de valor do seu select e quando a opção selecionada for "outro-assunto", então vc terá que alterar o display do input para inline.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Oi, Matheus. Eu queria implementar a funcionalidade que foi lecionada nesta aula de que o input iria aparecer somente após o radio de outro assunto fosse selecionado através da pseudoclasse :checked. Eu queria implementar está mesma funcionalidade no elemento select ao invés do radio.

Oi, Gabriel. Então, não há como implementar está funcionalidade num elemento select sendo restrito apenas ao radio? Eu li em uma duvida criada aqui que seria possivel. Segue a resposta:

No caso do select a pseudoclasse :checked pode ser usado para o elemento option dentro de um select, ou seja, ele não funciona para a tag select, somente para o item em si, no caso do select o option.

A idéia é a mesma do radio, já que selecionamos somente um item, no select selecionamos apenas uma opção.

option:checked {
    color: red;
}

Com base nessa resposta eu tentei implementar utlizando o select atraves do seletor option[value="outro"]:checked ~ input[name="outro-assunto"], mas nao consegui.

Com base nessa resposta eu tentei implementar utlizando o select atraves do seletor option[value="outro"]:checked ~ input[name="outro-assunto"], mas nao consegui.

Então, a questão é que a sua situação e a situação desse outro tópico que vc citou são diferentes! Veja que o seletor utilizado por vc tentará selecionar os elementos input[name="outro-assunto"] que sejam irmãos de option[value="outro"]:checked! Contudo, como vc bem observou inicialmente, o input é renderizado pelo navegador fora do select! De modo que o seletor utilizado não funciona!

Sendo assim, te forçando a utilizar JS para resolver a questão, como havia te explicado anteriormente.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Certo, entendi. Então, não há como utilizar a pseudoclasse :checked no <option> porque o navegador renderiza e sempre irá renderizar o input fora do <select>? Se sim, porque o navegador renderiza fora?

Opa, Thiago! Tudo certo?

Então, não há como utilizar a pseudoclasse :checked no porque o navegador renderiza e sempre irá renderizar o input fora do <select>?

Exatamente! Vc não vai conseguir resolver essa situação só com o CSS e terá que lançar mão do JS!

Se sim, porque o navegador renderiza fora?

Veja que na documentação da tag select é dito que só são aceitos elementos do tipo <option> ou <optgroup> dentro do select. Por isso o input é renderizado do lado de fora!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Obrigado, Gabriel!