Checkbox and Radio buttons are not working

Question

I'm creating a customized radio button and checkbox button, all seems fine and the css looks great however the problem is the buttons doesn't seem to be working. When i click on a radio button or a checkbox, it does not detect is as the new checked button. Can anyone help me on identifying the problem?

CODE:

 /** SIZE MODAL BUTTONS **/ .prod-desk-size-container { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 45pt; position:relative; float:left; width:100%; margin-bottom:20px; } .prod-desk-size-container input { position: absolute; opacity: 0; cursor: pointer; } .gold-check { position: absolute; top: 0; left: 20px; height: 25px; width: 25px; cursor: pointer; border: solid 1px #d9d9d9; } .gold-check:after { content: ""; position: absolute; display: none; } .prod-desk-size-container input:checked ~ .gold-check { background-image: url('../images/icon-selected.png'); background-size: 100%; border: 0px; } 

 <div class="modal fade show" id="modal-desk-product" tabindex="-1" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">HAWAIIAN</h5><br> <p class="modal-desc">Ham, pineapple,corn and mozzarella cheese</p> <div class="btn-close" data-dismiss="modal"></div> </div> <div class="modal-body mb-2"> <h6 class="modal-desk-product-title font-weight-bold text-uppercase text-left">What size are you after?</h6> <hr> <div class="prod-desk-size row text-left" id="prod-desk-size" data-toggle="buttons"> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Small <input type="radio" name="prod-desk-size-radio" checked> <span class="gold-check rounded-circle"></span> </label> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Medium <input type="radio" name="prod-desk-size-radio"> <span class="gold-check rounded-circle"></span> </label> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Large <input type="radio" name="prod-desk-size-radio"> <span class="gold-check rounded-circle"></span> </label> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Seriously Large <input type="radio" name="prod-desk-size-radio"> <span class="gold-check rounded-circle"></span> </label> </div> </div> </div> </div> 

Answer 1

Please Insert this css

.prod-desk-del-container{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 45pt;
  position:relative;
  float:left;
  width:100%;
  margin-bottom:20px;
}

Hope this help.

Let me know further clearification.

  /** DELETE INGREEDIENT MODAL BUTTONS **/ .prod-desk-del-container { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 45pt; position:relative; float:left; width:100%; margin-bottom:20px; } /* Hide the browser's default checkbox */ .prod-desk-del-container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .gold-check-box { position: absolute; top: 0; left: 20px; height: 25px; width: 25px; background-color: #eee; cursor: pointer; } /* When the checkbox is checked, add a blue background */ .prod-desk-del-container input:checked ~ .gold-check-box { background-color: #b79469; background-image: url('../images/icon-check-white.png'); background-size: 80%; background-repeat: no-repeat; background-position: 2px 6px; } /* Create the checkmark/indicator (hidden when not checked) */ .gold-check-box:after { content: ""; position: absolute; display: none; } 

 <h6 class="modal-desk-product-title font-weight-bold text-uppercase text-left pt-4">Would you like any extra ingredients?</h6> <hr> <div class="prod-desk-del row text-left" id="prod-desk-del" data-toggle="buttons"> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Eggs <span class="price">+$10.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Side of portion of Beef Ribs <span class="price">+$10.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Side of portion of Pork Ribs <span class="price">+$15.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Bacon Onion Jam <span class="price">+$15.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Prawn Top <span class="price">+$9.95</span?> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Grilled Onions <span class="price">+$9.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Bloomin' Oion Petals <span class="price">+$15.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">King Island Roaring Forties <span class="price">+$15.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Sauteed Mushrooms <span class="price">+$15.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Mayonnaise<span class="price">+$10.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> <label class="prod-desk-del-container col-sm-6 font-weight-bold">Pineapple <span class="price">+$15.95</span> <input type="checkbox" checked="checked" name="prod-desk-side-radio"> <span class="gold-check-box rounded"></span> </label> </div> 

Answer 2

You need to make the parent ( <label> ) position:relative :

.prod-desk-del-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 45pt;
    position: relative; // Add this
}

Also as a side note, semantically an <input> shouldn't be inside a <label>

Answer 3

You should be use this style

.prod-desk-size-container input:checked ~ .gold-check {
    background-image: url('../images/icon-selected.png');
    background-size: 100%;
    border: 1px solid;
    background-color: gray;
}

And the reason is

When you checked your radio button there you give .prod-desk-size-container input:checked ~ .gold-check{border:0;}

So please give any color and border as your requirement into this class-> .prod-desk-size-container input:checked ~ .gold-check

Hope this help

Let me know further clarification.

  /** SIZE MODAL BUTTONS **/ .prod-desk-size-container { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 45pt; position:relative; float:left; width:100%; margin-bottom:20px; } .prod-desk-size-container input { position: absolute; opacity: 0; cursor: pointer; } .gold-check { position: absolute; top: 0; left: 20px; height: 25px; width: 25px; cursor: pointer; border: solid 1px #d9d9d9; } .gold-check:after { content: ""; position: absolute; display: none; } .prod-desk-size-container input:checked ~ .gold-check { background-image: url('../images/icon-selected.png'); background-size: 100%; border: 1px solid; background-color: gray; } .modal-content:focus, .prod-desk-size-container:focus, .prod-desk-size:focus, .modal-header:focus, .modal-dialog:focus, .modal:focus { outline: none; } 

 <div class="modal fade show" id="modal-desk-product" tabindex="-1" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">HAWAIIAN</h5><br> <p class="modal-desc">Ham, pineapple,corn and mozzarella cheese</p> <div class="btn-close" data-dismiss="modal"></div> </div> <div class="modal-body mb-2"> <h6 class="modal-desk-product-title font-weight-bold text-uppercase text-left">What size are you after?</h6> <hr> <div class="prod-desk-size row text-left" id="prod-desk-size" data-toggle="buttons"> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Small <input type="radio" name="prod-desk-size-radio" checked> <span class="gold-check rounded-circle"></span> </label> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Medium <input type="radio" name="prod-desk-size-radio"> <span class="gold-check rounded-circle"></span> </label> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Large <input type="radio" name="prod-desk-size-radio"> <span class="gold-check rounded-circle"></span> </label> <label class="prod-desk-size-container col-sm-6 font-weight-bold">Seriously Large <input type="radio" name="prod-desk-size-radio"> <span class="gold-check rounded-circle"></span> </label> </div> </div> </div> </div>