2
respostas

O radio button "Outros" não está aparecendo em linha com os outros radio buttons

O radio button "Outros" não está aparecendo em linha com os outros radio buttons.

<form>
                    <fieldset>
                        <legend>Dados pessoais</legend>
                        <label for="nome">Nome:</label>
                        <input type="text" id="nome" name="nome" placeholder="Seu nome" pattern="[A-Za-z ']{4,}" title="Preencha esse campo com no mínimo 4 letras." required autofocus>
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" placeholder="exemplo@email.com" required>
                    </fieldset>

                    <fieldset>
                        <legend>Assunto</legend>
                        <label>
                            <input type="radio" name="assunto" value="blog">
                            Blog 
                        </label>

                        <label>
                            <input type="radio" name="assunto" value="servico">
                            Serviço
                        </label>
                    </fieldset>

                    <fieldset>
                        <input type="radio" name="assunto" value="outros" id="outros">
                        <label for="outros">Outros</label>
                        <input type="text" name="assunto">
                    </fieldset>

                    <label for="msg">Mensagem:</label>
                    <textarea id="msg" name="mensagem" cols="60" rows="10" placeholder="Digite aqui a sua mensagem." required></textarea>

                    <button type="submit">Enviar mensagem</button>

                </form>
    legend,
    label[for="msg"] {
        font-weight: bold;
        margin-bottom: 1em;
        font-size: 1.5em;
        font-family: "Open Sans Condesed", sans-serif;
    }

    label[for] {
        display: block;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        box-sizing: border-box;
        border: 1px solid gray;
        padding: 0.7em;
        width: 100%;
        font-family: inherit;
        font-size: 0.75em;
    }

    fieldset > fieldset {
        display: inline;
    }

    label[for="outros"] {
        display: inline;
    }

    input[name="assunto"] {
        width: auto;
    }

    input[value="outros"] ~ input {
        display: none;
    }

    input[value="outros"]:checked ~ input {
        display: inline;
    }

    input:focus,
    textarea:focus {
        background-color: rgb(230, 241, 245);
    }

    input[type="text"]:invalid,
    input[type="email"]:invalid,
    textarea {
        box-shadow: 0 0 3px red;
    }

    button {
        background-color: #3C1D3D;
        color: white;
        font-family: "Open Sans Condensed", sans-serif;
        font-size: 1em;
        padding: 12px;
        margin-top: 1em;
        float: right;
    }

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

Oi, Matheus, tudo bem?

Baixei o seu projeto completo por outra dúvida aqui no fórum, addicionei esses arquivos que você postou e aqui e o button outros apareceu e quando clicado, ele abre um campo para ser preenchido. O que exatamente é para acontecer com esse button?

O button de "outros" não está aparecendo em linha com os outros buttons, ele está aparecendo em baixo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software