Jump to content
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

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.