Force require on display: none

Question

Force require on display: none

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have the following html:

<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>

That shows payment methods.

In it, radio buttons is display:none so labels is shown instead.

Is there a way I can force at least 1 button to be ticked even though they are with display:none ?

The result is this:

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

html css

asked by anonymous 11.09.2017 / 13:18

2 answers

Date conversion / formatting issues Double click first button to execute method

score 2 · Answer 1

I believe the goal is to interact with radio along with the image that is displayed, causing the image to have the behavior of radio . If it is, you can, instead of setting display: none , which removes the DOM element, use visibility: hidden , which just hides it.

What's the difference between display: none and visibility: hidden?

The point is that the space occupied on the screen by input is not compensated by hiding it, so it is also necessary to define the position of the same as absolute; in this way, you will remove the element from the natural flow rendering and your screen space will be compensated.

See an example:

label {
  cursor: pointer;
}

label > input {
  visibility: hidden;
  position: absolute;
}

label > input:checked + img {
  border: solid 1px red;
}

<label>
  <input type="radio" name="avatar" value="1" checked>
  <img src="http://via.placeholder.com/100x100"alt="">
</label>
<label>
  <input type="radio" name="avatar" value="2">
  <img src="http://via.placeholder.com/100x100"alt="">
</label>
<label>
  <input type="radio" name="avatar" value="3">
  <img src="http://via.placeholder.com/100x100"alt="">
</label>

score 0 · Answer 2

0

Put the width and height value "0", so it will not be "display: none" and will not appear the same way.

  width:0;
  height:0;

11.09.2017 / 14:42