Duvida com :checked | HTML5 e CSS3 II: Turbinando as suas páginas

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Felipe Junges

| 84.2k xp | 31 posts

Estagiário

Olá, estou com problema na checagem value="outro" esta selecionado. No exercício o assunto é selecionada via input type="radio", mas quero usar select + option para selecionar a opção do assunto.

CSS:

legend,
label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1rem;
}

label[for] {
    display: block;
}

input, textarea {
    font-family: inherit;
    font-size: 100%;
    padding: .25rem .5rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

fieldset > fieldset {
    display: inline;
}

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

input[name="outro-assunto"] {
    width: auto;
    margin-top: 0;
    margin-left: 1rem;
    padding: 0;
}

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

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

button {
    border: 0;
    padding: .5rem 1rem;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2rem;
    margin-left: auto;
    margin-top: 1rem;
}

option[value="outro"] ~ input[name="outro-assunto"] {
    display: none;
}

option[value="outro"]:checked ~ input[name="outro-assunto"] {
    display: inline;
}

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Contato - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/contato.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main class="link-do-main " >
           <h1 class="titulo-principal">Contato</h1>
            <div class="container">
                <!-- Formulário -->
                <form>
                    <fieldset>
                        <legend>Dados pessoais</legend>
                        <label for="nome">Nome:</label>
                        <input id="nome" type="text" name="nome" required placeholder="Seu Nome" autofocus pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres de Aa-Zz, espaço e '">
                        <label for="email">Email:</label>
                         <input id="email" name="e-mail" placeholder="seuemail.com" type="email" required>
                    </fieldset>

                    <fieldset>
                        <legend>Assunto</legend>
                        <select name="assunto">
                            <option value="blog">Blog</option>
                            <option value="servico">Serviço</option>
                            <option value="outro">Outro</option>
                            <input type="text" name="outro-assunto" id="outro-assunto">
                        </select>
                    </fieldset>
                    <label for="msg">
                        Mensagem
                    </label>







                    <textarea id="msg" name="mensagem" cols="36" rows="6" required placeholder="Digite aqui sua mensagem"></textarea>
                    <button type="submit">Enviar <strong>para mim</strong></button>
                </form>
            </div>
        </main>
        <img src="img/eu.jpg" class="minha-foto" alt="Foto de João da Silva">
        <aside class="navegacao-site link-do-menu h1-do-menu">
            <h1>João da Silva</h1>
            <nav class="link-da-nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-sociais">
                <li><a class="github" href="http://github.com/joaodasilva" data-tooltip="Veja meus projetos OpenSource">GitHub</a></li>
                <li><a class="twitter" href="http://twitter.com/joaodasilva" data-tooltip="Siga-me no Twitter">Twitter</a></li>
                <li><a class="linkedin" href="http://linkedin.com/joaodasilva" data-tooltip="Veja meu cúrriculo">Linkedin</a></li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>

3 respostas

por ALFREDO RODRIGUES BRAGA

| 202.4k xp | 57 posts

Analista de Sistemas

19/10/2016

Para deixar uma opcao selecionada se utiliza o 'selected="selected"'. Dessa forma:

<option value="valor_do_assunto" seleted="selected">valor do assunto</option>

por Felipe Junges

| 84.2k xp | 31 posts

Estagiário

19/10/2016

Mas ai não estaria sendo selecionado por default ? Como que funciona esse selected ? Eu não quero que o outro, seja selecionado de forma padrão, quero que quando eu clicar nele, apareça o input text do outro assunto

solução!

por ALFREDO RODRIGUES BRAGA

| 202.4k xp | 57 posts

Analista de Sistemas

21/10/2016

Acho que intendi sua solicitação. você que que o input text do outro assunto fique "escondido" e que ele aparece quando no select a opção escolhida seja a "outro" . Sendo assim eu recomendo a utilização do Jquery.

<html>
    <head>
        <title>Contato - João da Silva</title>
        <meta charset="utf-8">
    </head>
    <body>
        <main class="link-do-main " >
           <h1 class="titulo-principal">Contato</h1>
            <div class="container">
                <!-- Formulário -->
                <form>
                    <fieldset>
                        <legend>Dados pessoais</legend>
                        <label for="nome">Nome:</label>
                        <input id="nome" type="text" name="nome" required placeholder="Seu Nome" autofocus pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres de Aa-Zz, espaço e '">
                        <label for="email">Email:</label>
                         <input id="email" name="e-mail" placeholder="seuemail.com" type="email" required>
                    </fieldset>

                    <fieldset>
                        <legend>Assunto</legend>
                        <select name="assunto">
                            <option value="blog">Blog</option>
                            <option value="servico">Serviço</option>
                            <option value="outro">Outro</option>
                            <input style="display: none" type="text" name="outro-assunto" id="outro-assunto">
                        </select>
                    </fieldset>
                    <label for="msg">
                        Mensagem
                    </label>







                    <textarea id="msg" name="mensagem" cols="36" rows="6" required placeholder="Digite aqui sua mensagem"></textarea>
                    <button type="submit">Enviar <strong>para mim</strong></button>
                </form>
            </div>
        </main>
        </body>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script type="text/javascript">

            $(document).ready(function()
            {

                $('select[name="assunto"]').on('change', function()
                {

                    if($(this).val() == 'outro')
                    {
                        $('input#outro-assunto').show();                        
                    }
                    else
                    {
                        $('input#outro-assunto').hide();               
                    }    
                });

            });


            </script>
</html>