Bootstrap弹出框中的自定义圆形复选框

Question

我尝试使用此自定义圆形复选框

 .round { position: relative; } .round label { background-color: #fff; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; height: 28px; left: 0; position: absolute; top: 0; width: 28px; } .round label:after { border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 7px; opacity: 0; position: absolute; top: 8px; transform: rotate(-45deg); width: 12px; } .round input[type="checkbox"] { visibility: hidden; } .round input[type="checkbox"]:checked+label { background-color: #66bb6a; border-color: #66bb6a; } .round input[type="checkbox"]:checked+label:after { opacity: 1; } html, body { height: 100%; margin: 0; } body { background-color: #f1f2f3; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .container { margin: 0 auto; } 

 <div class="container"> <div class="round"> <input type="checkbox" id="checkbox" /> <label for="checkbox"></label> </div> </div> 

而且我想将此添加到引导弹出式蒙太奇html内容

 $(document).ready(function() { $('#order-popover').popover({ html: true, content: function() { return $('#popover_content_wrapper').html(); } }).on('shown.bs.popover', function() {}); }); 

 .round { position: relative; } .round label { background-color: #fff; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; height: 28px; left: 0; position: absolute; top: 0; width: 28px; } .round label:after { border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 7px; opacity: 0; position: absolute; top: 8px; transform: rotate(-45deg); width: 12px; } .round input[type="checkbox"] { visibility: hidden; } .round input[type="checkbox"]:checked+label { background-color: #66bb6a; border-color: #66bb6a; } .round input[type="checkbox"]:checked+label:after { opacity: 1; } html, body { height: 100%; margin: 0; } body { background-color: #f1f2f3; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .container { margin: 0 auto; } 

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <a href="#" id="order-popover" data-toggle="popover" data-html="true" data-placement="bottom">OPEN</a> <div id="popover_content_wrapper" style="display:none;"> <div style="width: 100px;"> <div class="round"> <input type="checkbox" id="checkbox" /> <label for="checkbox"></label> </div> </div> </div> 

当我将其添加到引导弹出式复选框时不起作用

Answer 1

这是因为您的弹出HTML是在单击时创建的，这就是为什么您的for属性无法正常工作的原因...

因此，您需要使用position:relative和一些带有opacity:0 z-index将复选框输入放置在标签前面，以将其隐藏

注意 ：如果删除for属性，它也将起作用，但是为了更好的可读性而编写

 $(document).ready(function() { $('#order-popover').popover({ html: true, content: function() { return $('#popover_content_wrapper').html(); } }).on('shown.bs.popover', function() {}); }); 

 .round { position: relative; width: 28px; height: 28px; } .round label { background-color: #fff; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; height: 28px; left: 0; position: absolute; top: 0; width: 28px; } .round label:after { border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 7px; opacity: 0; position: absolute; top: 8px; transform: rotate(-45deg); width: 12px; } .round input[type="checkbox"] { position: relative; z-index: 9; opacity: 0; width: 100%; height: 100%; } .round input[type="checkbox"]:checked+label { background-color: #66bb6a; border-color: #66bb6a; } .round input[type="checkbox"]:checked+label:after { opacity: 1; } html, body { height: 100%; margin: 0; } body { background-color: #f1f2f3; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .container { margin: 0 auto; } 

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <a href="#" id="order-popover" data-toggle="popover" data-html="true" data-placement="bottom">OPEN</a> <div id="popover_content_wrapper" style="display:none;"> <div style="width: 100px;"> <div class="round"> <input type="checkbox" id="checkbox3" /> <label for="checkbox3"></label> </div> </div> </div>