checkbox together with input hidden not work

user_16519097 0
Viewed 48

Without the hidden input, the check works fine, but not hidden.

I need to make some adjustments to make it work, but I don't know what adjustments are necessary.

.check-item {
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    margin-top: 5px;
}
.check-item input[type='checkbox'] {
    display: none;
} 
.check-item label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 3px;
    margin: 0 10px 0 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #000;
    background-color: #FFF;
}
.check-item input[type=checkbox]:not(:checked)+label, 
.check-item input[type=checkbox]:checked+label {
    cursor: pointer;
}
.check-item input[type=checkbox]:checked+label:after {
    position: absolute;
    top: 3px;
    left: 3px;
    content: "X";
    display: block;
    color: #026492;
    font-weight: 600;
}
<!-- WORK -->
<div class="check-item">
  <input type="checkbox" id="dS0" name="destPapel" value="Destin" /> 
  <label for="dS0"><span>Destin</span></label>
</div>

<!-- NOT WORK -->
<div class="check-item">
  <input class="check" type="checkbox" id="pS0" name="pidPapel" value="Propri"/> 
  <input type="hidden" name="_pidPapel" value="on">
  <label for="pS0"><span>Propri</span></label>
</div>

Above you have the two options and the css

css html
1 Answers

CSS operator + means "immediate next child". So as per your second template label is not the immediate next child. So it is not applied the style.

Change the order like below.

<div class="check-item">
  <input class="check" type="checkbox" id="pS0" name="pidPapel" value="Propri"/>
  <label for="pS0"><span>Propri</span></label>
  <input type="hidden" name="_pidPapel" value="on">      
</div>


.check-item {
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    margin-top: 5px;
}
.check-item input[type='checkbox'] {
    display: none;
} 
.check-item label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 3px;
    margin: 0 10px 0 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #000;
    background-color: #FFF;
}
.check-item input[type=checkbox]:not(:checked)+label, 
.check-item input[type=checkbox]:checked+label {
    cursor: pointer;
}
.check-item input[type=checkbox]:checked+label:after {
    position: absolute;
    top: 3px;
    left: 3px;
    content: "X";
    display: block;
    color: #026492;
    font-weight: 600;
}
<div class="check-item">
  <input type="checkbox" id="dS0" name="destPapel" value="Destin" /> 
  <label for="dS0"><span>Destin</span></label>
</div>

<!-- NOT WORK -->
<div class="check-item">
  <input class="check" type="checkbox" id="pS0" name="pidPapel" value="Propri"/> 
  <label for="pS0"><span>Propri</span></label>
  <input type="hidden" name="_pidPapel" value="on">
  
</div>

EDIT

If you are not able to change the order then update your CSS. Instead of +, you can use ~.

.check-item {
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    margin-top: 5px;
}
.check-item input[type='checkbox'] {
    display: none;
} 
.check-item label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 3px;
    margin: 0 10px 0 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #000;
    background-color: #FFF;
}
.check-item input[type=checkbox]:not(:checked)~label, 
.check-item input[type=checkbox]:checked~label {
    cursor: pointer;
}
.check-item input[type=checkbox]:checked~label:after {
    position: absolute;
    top: 3px;
    left: 3px;
    content: "X";
    display: block;
    color: #026492;
    font-weight: 600;
}
<div class="check-item">
  <input type="checkbox" id="dS0" name="destPapel" value="Destin" /> 
  <label for="dS0"><span>Destin</span></label>
</div>

<!-- NOT WORK -->
<div class="check-item">
  <input class="check" type="checkbox" id="pS0" name="pidPapel" value="Propri"/> 
  <input type="hidden" name="_pidPapel" value="on">  
  <label for="pS0"><span>Propri</span></label>
  
</div>

user_36070640
Related