Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

carcleo

Forçar require em display:none

Recommended Posts

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);
    }

 

Edited by carcleo

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
carcleo

Sim Ruy. Mas acho que você não chegou a olhar todo o código, pois se eu colocar required em um input com estilo display:none, o require não funciona.

Pelo menos não está funcionando.

Isso pode ser visto em 

 

http://www.hotplateprensas.com.br/estilos/

 

A validação pula direto para o próximo campo do formulário.

Edited by carcleo

Share this post


Link to post
Share on other sites
Rui Carlos

O required está a funcionar no teste que fiz.  O problema é que a mensagem de aviso do browser em caso de erro é mostrada junto ao input, que não está visível, logo também não vez a mensagem de aviso se não vires o input.  Se queres ver a mensagem de aviso, provavelmente vais ter que manter o input no ecrã, e escondê-lo sem o remover.

Podes tentar com as seguintes propriedades CSS:

pagamento-metodo input {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

 

Share this post


Link to post
Share on other sites
carcleo

Qual navegador usou?

Porque no IE, Chrome, Firefox e Edge, o validator está pulando direto para o próximo campo.

 

No caso da tua orientação de estilo,  estou tendo problemas com a "printagem" dos componentes na tela.

 

Veja como ficou?

aa.jpg

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.