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 input
estava dentro da label.