{display:none} not working with checkbox?

Question

When "same as shipping address" is checked, the form below that section is supposed to disappear. I put {display:none} but it doesn't work. It worked when I got rid of {div class="checkboxalign} but then it is no longer aligned in the center. I was wondering how to get this function to work, but still keep it center aligned? Thank you.

.checkbox-custom, .radio-custom {
    margin: 0 auto;
    width: 40%;
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 1px solid #717171;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #a1cdad;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #a1cdad;
}


.checkbox-custom:checked ~.input-box {
    display: none;
}

.checkboxalign {
    margin: 0 auto;
    width: auto;
    text-align: left;
    display: table;
    margin-bottom: 10px;
}

.radioalign {
    margin: 0 auto;
    width: auto;
    text-align: left;
    display: table;
}

<form class="form2">
  
    <div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>

    <div class="checkboxalign">
        <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
        <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
    </div>

    <div class="input-box">
      <input type="text" id="first-name" placeholder="John" data-type="name"/>
      <label for="first-name"><p>First Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="last-name" placeholder="Smith" data-type="name"/>
      <label for="last-name"><p>Last Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
      <label for="phone-number"><p>Phone Number</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="company" placeholder="Company" data-type="name"/>
      <label for="company"><p>Company Name</p></label>
    </div>  
      
    <div class="input-box">
      <input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
      <label for="address" data-type="name"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="city" placeholder="Everytown" data-type="text"/>
      <label for="city" data-type="name"><p>City</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>Texas</p></option>
        <option><p>Louisiana</p></option>
        <option><p>New Mexico</p></option>
        <option><p>Oklahoma</p></option>
      </select>
      <label for="card-type"><p>State</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="zip" placeholder="12345" data-type="text"/>
      <label for="zip" data-type="text"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>United States</p></option>
      </select>
      <label for="card-type"><p>Country</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/>
      <label for="email"><p>Email Address</p></label>
    </div>  
  </form>
    
   <form class="form3">
       <div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
       
       <div class="radioalign">
            <div>
                <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
                <label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong>  $0.00</strong></label>
            </div>
            <div>
                <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
                <label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
            </div>
            <div>
                <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
                <label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
            </div>
        </div>
  </form>

See also [How does css checkbox hack work?](https://stackoverflow.com/q/29950272/1016716) and [Is there a CSS parent selector?](https://stackoverflow.com/q/1014861/1016716). — Mr Lister, Dec 04 '18 at 07:36

score 0 · Answer 1 · answered Dec 04 '18 at 07:18

0

Because .input-box Elements are not siblings of the checkbox. And your selector is

.checkbox-custom:checked ~.input-box {
  display: none;
}

answered Dec 04 '18 at 07:18

iPirat

2,197
1
17
30

Hmm that explains why it works when I get rid of .checkboxalign. do you know of a way to keep still keep them aligned in the center while keeping everything under .input-box the way it is (don't want to center align them) – gofish1234 Dec 04 '18 at 07:42
Put the checkbox inside the label. Then you can give the label all the styles that `.checkboxalign` now has. – Mr Lister Dec 04 '18 at 07:56
@gofish1234 well, IF you want to keep the html the way it is, you won’t be able to hide .input-box elements with plain css, as there is no parent selector. You could use simple jquery, though. IF you want to achieve the result with plain css, you need to rearrange the html, such that your selector works. As trade off you will need to adjust the styles to achieve desired rendering (like centering/whatever) – iPirat Dec 04 '18 at 09:45

score 0 · Answer 2 · answered Dec 04 '18 at 07:36

0

There must be wrapper div to form elements which you want to hide then your css will work.

answered Dec 04 '18 at 07:36

Omkar Vaity

55
4

{display:none} not working with checkbox?

2 Answers2