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

Question

我正在创建一个自定义的单选按钮和复选框按钮，一切看起来都很好，css看起来很棒，但问题是按钮似乎不起作用。当我点击单选按钮或复选框时，它不会检测到is是新选中的按钮。有人能帮我找出问题吗？

代码：

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