没有属性的Bootstrap自定义复选框 [英] Bootstrap custom checkbox without attribute for

问题描述

是否有一种方法可以使Bootstrap 4自定义复选框样式保持为，而无需在输入中使用 和在标签上使用属性for?删除后，选中的样式不存在.

Is there a way to still have the Bootstrap 4 custom checkbox styling without using the id on the input and the attribute for on the label? The styling for checked is not there when you remove it.

示例:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
  <label class="custom-control-label">Check this custom checkbox</label>
</div>

我尝试用标签包装输入，但这似乎也不起作用.有没有一种方法可以避免给输入一个静态ID并仍然获得Boostrap样式的复选框?谢谢！

I've tried wrapping the input with label, but that doesn't seem to do anything either. Is there a way I could avoid giving the input a static id and still get the Boostrap styled checkbox? Thanks!

推荐答案

是的，但是您还需要做一些自定义CSS.

Yes you can do but for that you need to do some custom CSS as well.

请尝试使用以下CSS

Please try below CSS

 .custom-checkbox{
    position: relative;
  }
  .custom-checkbox input{
    visibility: hidden;
    margin-right: 8px;
  }
  .custom-label:before,.custom-label:after{
    width: 16px;
    height: 16px;
    content: "";
    border: 1px solid;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0px;
    border: #adb5bd solid 1px;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: .25rem;
  }
  .custom-checkbox input:checked + .custom-label:before{
    border-color: #007bff;
    background-color: #007bff;
  }
  .custom-checkbox input:checked + .custom-label:after{
    width: 4px;
    border: 2px solid #ffffff;
    height: 8px;
    border-top: none;
    border-left: none;
    transform: rotate(40deg);
    left: 6px;
    top: 3px;
  }

<label class="custom-checkbox"><input type=checkbox name=chkbx1> <span class="custom-label">Label here</span></label>

.

这篇关于没有属性的Bootstrap自定义复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！