复选框和单选按钮不起作用

Question

我正在创建一个自定义的单选按钮和复选框按钮，一切似乎都很好，并且css看起来不错，但是问题是这些按钮似乎无法正常工作。当我单击单选按钮或复选框时，它不会检测为是新选中的按钮。有人可以帮助我确定问题吗？

代码：

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

请插入此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;
}

希望获得帮助。

让我知道进一步的澄清。

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

您需要将其设为父（<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
}

此外，从语义上讲，<input>不应位于<label>内

Answer 3

您应该使用这种样式

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

原因是

当您选中单选按钮时，您会输入.prod-desk-size-container input:checked ~ .gold-check{border:0;}

因此，请根据需要在此类中提供任何颜色和边框-> .prod-desk-size-container input:checked ~ .gold-check

希望获得帮助

让我知道进一步的澄清。

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