O texto original da resposta é este:
O radio usado para o assunto "Outro" tem o atributo value com esse texto. Então, usando os seletores de atributo e de irmão, conseguimos selecionar o campo e escondê-lo com a propriedade display:
input[value="Outro"] ~ input {
display: none;
}Agora, quando esse radio for selecionado, a pseudoclasse será adicionada a ele. Podemos usar essa pseudoclasse para selecionar novamente o campo de texto ao lado e mudar o valor da propriedade display:
input[value="Outro"]:checked ~ input {
display: inline;
}Tentei submeter uma alteração, mas acabou não dando certo. Enfim, vou aqui mesmo dizer o que percebi e se caso houver alguém com este mesmo problema, que fique claro como eu pude resolver.
Quando fiz o desenvolvimento da página, especificamente do fieldset assunto, meu código HTML ficou da seguinte maneira:
<fieldset>
<legend>Assunto</legend>
<label>
<input type="radio" name="assunto" value="blog"> Blog
</label>
<label>
<input type="radio" name="assunto" value="servico"> Serviços
</label>
<label>
<input type="radio" name="assunto" value="outro"> Outro
</label>
<input type="text" name="outro">
</fieldset>Deixando o input com nome "outro" fora da label, não consegui executar o código CSS corretamente, então eu o pus dentro da label assunto com o value outro, desta forma:
<label>
<input type="radio" name="assunto" value="outro"> Outro
<input type="text" name="outro">
</label>E executei o pus no meu CSS o seguinte código:
input[value="outro"] + input {
display: none;
}
input[value="outro"]:checked + input {
display: inline;
}Não tive nenhum problema com o código quando, no lugar de + era ~, porém, só consegui executar tal código quando o inputestava dentro da label.
