Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Aula 01 para Aula 02 - Problema com radio buttons

Boa tarde a todos , acredito que seja um problema simples porém não estou conseguindo visualizar . A situação é que já na primeira aula não estou conseguindo aplicar o disable no label que representa bebida ou bolos , simplesmente não tenho retorno nenhum .

Segue o código da minha index : Estou colocando o head fora por que ele não aparece na formatacao :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="estilo.css">
        <title>Só de cenoura</title>

    </head>
    <body>

        <input type="radio"
               name="opcao"
               id="opcao-bolos" checked>
        <label for="opcao-bolos">Bolos</label>

        <input type="radio"
               name="opcao"
               id="opcao-bebidas">
        <label for="opcao-bebidas">Bebidas</label>

        <div class="container-menus">
            <img src="imagens/menu-bolos.png"
                 alt="Nossos bolos"
                 id="menu-bolos"
                 class="menu">
            <img src="imagens/menu-bebidas.png"
                 alt="As Bebidas"
                 id="menu-bebidas"
                 class="menu">
        </div>

    </body>
</html>

Segue abaixo agora o meu estilo.css

#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos
{
    display:none;
}

.menu {
    width: 100%;
}

body{
    background: #3D1A11;
    margin:0;
    font-family: sans-serif;
    text-align:center;
}
input[type=radio]{
    display: none;
}
label{
    background-color:#563429;
    background-repeat:no-repeat;
    background-size:4em;
    background-position:center top;
    color:white;
    display:block;
    font-size:75%;
    padding:4em 0 1em;
    text-transform: uppercase;
}
    label [for= opcao-bolos]{
        background-image: url(imagens/icone-bolos.svg);
    }
    label [for=opcao-bebidas]{
        background-image: url(imagens/icone-bebidas.svg);
    }
    input[type=radio]:checked + label{
        background-color:#E4876D;
    }
label{
    width:50%;
    position:fixed;
    bottom:0px;
    z-index:1;
}
label [for=opcao-bolos]{
    left:0;
}
label [for=opcao-bebidas]{
    right:0;
}

Agradeço a qualquer ajuda , estou usando o Chrome versão 48.0.2

3 respostas
solução

Oi Hugo,

Não entendi o bug exatamente, mas achei um erro no CSS: o espaço no seletor de atributo do label. Deveria ser assim:

label[for=opcao-bolos]

(aparece em 4 lugares)

Abraço

Pronto resolveu agora está funcionando tudo , muito obrigado !!

Oi Hugo! Me parece que você não tem mais dúvidas nesse tópico, por isso vou marcar ele como resolvido.

Caso precise, você pode sempre abrir um novo tópico aqui no fórum.

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