Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #57 da revista programar. Faz já o download aqui!

carcleo

Forçar require em display:none

Mensagens Recomendadas

carcleo    5
carcleo

Tenho o seguinte html:

(Obs.: disponível para testes em http://www.hotplateprensas.com.br/estilos/)

    <ul class="payment-methods">
      <li class="payment-method paypal">
        <input name="payment_methods" type="radio" id="paypal">
        <label for="paypal"></label>
      </li>
      <li class="payment-method pagseguro">
        <input name="payment_methods" type="radio" id="pagseguro">
        <label for="pagseguro"></label>
      </li>
      <li class="payment-method boleto">
        <input name="payment_methods" type="radio" id="boleto">
        <label for="boleto"></label>
      </li>
    </ul>

Que mostra métodos de pagamento.

Nele, os radio buttons estão com display:none para que os labels sejam mostrados em seu lugar.

Existe uma forma de eu forçar que pelo menos 1 button, seja marcado mesmo que eles estejam com display:none

O resultado é esse:

3qC2F.jpg


CSS

    @charset "utf-8";
    /* CSS Document */
    
    .divCheckList .valorBool,
    .divCheckList .divCheckBox {
        height: 34px;
        display: inline-block;
        border: rgb(222,222,222) 1px solid;
        vertical-align: middle;
    }
    .divCheckList .valorBool {
        line-height: 34px;
    }
    .divCheckList .labelCheckBox {
        position: relative;
        display: block;
        width: 60px;
        height: 34px;
        background-color: rgb(222,222,222);
        border: none;
        border-radius: 34px;
        -webkit-transition: .4s;
        transition: .4s;
        cursor: pointer;
    }
    .divCheckList .labelCheckBox:before {
        position: absolute;
        display: block;
        width: 26px;
        height: 26px;
        background-color: #FFF;
        border-radius: 50%;
        content: "";
        margin: 4px;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .divCheckList .divCheckBox .checkBox:checked + .labelCheckBox {
        background-color: blue;
    }
    .divCheckList .divCheckBox .checkBox:checked + .labelCheckBox:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

 

Editado por carcleo

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
carcleo    5
carcleo

Gostaria de usar apenas css. Mas a dúvida é outra, é html mesmo. Como coloca require em um campo que está com display:none.

Não é questão de validação somente. Entendeu?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade