Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Input de "Outros" não aparece

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 Thiago Viana
| 136.7k xp | 11 posts

O valor no radio quando marcado em Outros, ele não mostra a caixa https://prnt.sc/maa115

.formulario {
    margin-left: 18%;
    width: 49rem;
    height: 26rem;
    box-sizing: border-box;
    padding-left: 5rem;
}

.legend {
    font-size: 100%;
    padding-top: 10px;
    font-weight: bold;
}

button {
    display: block;
    position: relative;
    left: 77.7%;
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1rem;
    border: transparent;
    width: 180px;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    font-size: 120%;
}


textarea{
    padding: 10px;
    font-family: inherit;
}

.dados-pessoal > label{
    display: block;
}

.dados-pessoal > input {
    padding: 5px;
    border: transparent;
    height: 20px;
}

.dados-pessoal > input, textarea {
    width: 100%;
    font-family: "Arial", sans-serif;
    box-shadow: 0 0 0 1px gray;
}

button:focus, button:hover {
    background-color: #8C1D3D
}

input:invalid {
    box-shadow: 0 0 3px red;
}

input:focus {
    background-color: #FFD;
}

input[type="text"] {
    display: none;
}

input[value="Outros"]:checked ~ input[type="text"] {
    display: inline;
}




<form class="formulario">
            <fieldset class="dados-pessoal">
                <legend class="legend"><strong>Seus dados</strong></legend>
                <label for="nome">Nome</label>
                <input id="nome" name="nome" autofocus placeholder="Digite seu nome" title="O nome precisa ter pelo menos 4 caracteres" required pattern="[A-Za-z '`´]{4,}" tabindex="1">
                <label for="e-mail">E-mail</label>
                <input id="e-mail" name="e-mail" type="email" required placeholder="Digite seu E-mail" tabindex="1">
            </fieldset>
            <fieldset class="assuntos">
                <legend class="legend"><strong>Assunto</strong></legend>
                <label><input type="radio" name="Assunto" value="Blog">Blog</label>
                <label><input type="radio" name="Assunto" value="Serviço">Serviço</label>
                <label><input type="radio" name="Assunto" value="Outros">Outros</label>
                <input type="text">
            </fieldset>
            <fieldset class="enviar-msg">
                <legend class="legend"><strong>Sua mensagem</strong></legend>
                <textarea name="Mensagem" cols="96" rows="10" required placeholder="Digite sua mensagem"></textarea>
                <button type="submit">Enviar Mensagem</button>
            </fieldset>
        </form>
3 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Thiago tudo bem?

O seletor ~ significa irmãos mais novos.

Ou seja o input text do radio Outros não é o irmão mais novo e sim tiu mais novo.

Porque ele o input texto do Outros é irmão do label. No vídeo do professor deu certo porque ele estava usando o label no mesmo nível que o input text Outros.

Infelizmente no CSS ainda não temos seletor para o elemento pai.

Mas... vamos usar javascript para contornar o problema. Afinal no final é tudo 0 e 1.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .formulario {
            margin-left: 18%;
            width: 49rem;
            height: 26rem;
            box-sizing: border-box;
            padding-left: 5rem;
        }

        .legend {
            font-size: 100%;
            padding-top: 10px;
            font-weight: bold;
        }

        button {
            display: block;
            position: relative;
            left: 77.7%;
            text-align: center;
            background-color: #3C1D3D;
            color: #F2FFFC;
            padding: 1rem;
            border: transparent;
            width: 180px;
            font-family: "Open Sans Condensed", "Arial", sans-serif;
            font-size: 120%;
        }


        textarea{
            padding: 10px;
            font-family: inherit;
        }

        .dados-pessoal > label{
            display: block;
        }

        .dados-pessoal > input {
            padding: 5px;
            border: transparent;
            height: 20px;
        }

        .dados-pessoal > input, textarea {
            width: 100%;
            font-family: "Arial", sans-serif;
            box-shadow: 0 0 0 1px gray;
        }

        button:focus, button:hover {
            background-color: #8C1D3D
        }

        input:invalid {
            box-shadow: 0 0 3px red;
        }

        input:focus {
            background-color: #FFD;
        }

        input[type="text"] {
            display: none;
        }



    </style>
</head>

<body>
    <form class="formulario">
        <fieldset class="dados-pessoal">
            <legend class="legend"><strong>Seus dados</strong></legend>
            <label for="nome">Nome</label>
            <input id="nome" name="nome" autofocus placeholder="Digite seu nome" title="O nome precisa ter pelo menos 4 caracteres"
                required pattern="[A-Za-z '`´]{4,}" tabindex="1">
            <label for="e-mail">E-mail</label>
            <input id="e-mail" name="e-mail" type="email" required placeholder="Digite seu E-mail" tabindex="1">
        </fieldset>
        <fieldset class="assuntos">
            <legend class="legend"><strong>Assunto</strong></legend>
            <label><input type="radio" name="Assunto" value="Blog">Blog</label>
            <label><input type="radio" name="Assunto" value="Serviço">Serviço</label>
            <label><input onchange="document.getElementById('campoOutros').style.display='inline'" type="radio" name="Assunto" value="Outros">Outros</label>
            <input id="campoOutros" type="text">
        </fieldset>
        <fieldset class="enviar-msg">
            <legend class="legend"><strong>Sua mensagem</strong></legend>
            <textarea name="Mensagem" cols="96" rows="10" required placeholder="Digite sua mensagem"></textarea>
            <button type="submit">Enviar Mensagem</button>
        </fieldset>
    </form>
</body>

</html>

Quando clicar no radio Outros o campo de texto do outro é acionado através do gatilho onchange do radio Outros.

Espero ter ajudado!!!

por Thiago Viana
| 136.7k xp | 11 posts

Ainda sim quando eu clico em "Outros" e volto para Serviço ou Blog, o input não some

solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Desculpe, esqueci de programar essa parte. Segue código atualizado!!!!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .formulario {
            margin-left: 18%;
            width: 49rem;
            height: 26rem;
            box-sizing: border-box;
            padding-left: 5rem;
        }

        .legend {
            font-size: 100%;
            padding-top: 10px;
            font-weight: bold;
        }

        button {
            display: block;
            position: relative;
            left: 77.7%;
            text-align: center;
            background-color: #3C1D3D;
            color: #F2FFFC;
            padding: 1rem;
            border: transparent;
            width: 180px;
            font-family: "Open Sans Condensed", "Arial", sans-serif;
            font-size: 120%;
        }


        textarea{
            padding: 10px;
            font-family: inherit;
        }

        .dados-pessoal > label{
            display: block;
        }

        .dados-pessoal > input {
            padding: 5px;
            border: transparent;
            height: 20px;
        }

        .dados-pessoal > input, textarea {
            width: 100%;
            font-family: "Arial", sans-serif;
            box-shadow: 0 0 0 1px gray;
        }

        button:focus, button:hover {
            background-color: #8C1D3D
        }

        input:invalid {
            box-shadow: 0 0 3px red;
        }

        input:focus {
            background-color: #FFD;
        }

        input[type="text"] {
            display: none;
        }



    </style>
</head>

<body>
    <form class="formulario">
        <fieldset class="dados-pessoal">
            <legend class="legend"><strong>Seus dados</strong></legend>
            <label for="nome">Nome</label>
            <input id="nome" name="nome" autofocus placeholder="Digite seu nome" title="O nome precisa ter pelo menos 4 caracteres"
                required pattern="[A-Za-z '`´]{4,}" tabindex="1">
            <label for="e-mail">E-mail</label>
            <input id="e-mail" name="e-mail" type="email" required placeholder="Digite seu E-mail" tabindex="1">
        </fieldset>
        <fieldset class="assuntos">
            <legend class="legend"><strong>Assunto</strong></legend>
            <label><input onchange="document.getElementById('campoOutros').style.display='none'" type="radio" name="Assunto" value="Blog">Blog</label>
            <label><input onchange="document.getElementById('campoOutros').style.display='none'" type="radio" name="Assunto" value="Serviço">Serviço</label>
            <label><input onchange="document.getElementById('campoOutros').style.display='inline'" type="radio" name="Assunto" value="Outros">Outros</label>
            <input id="campoOutros" type="text">
        </fieldset>
        <fieldset class="enviar-msg">
            <legend class="legend"><strong>Sua mensagem</strong></legend>
            <textarea name="Mensagem" cols="96" rows="10" required placeholder="Digite sua mensagem"></textarea>
            <button type="submit">Enviar Mensagem</button>
        </fieldset>
    </form>
</body>

</html>