覆盖Bootstrap 4的复选框和单选按钮的scss值

Question

我目前正在尝试创建一个自定义样式表，以覆盖默认的Bootstrap 4.3.1主题，并且在复选框和单选按钮上遇到了一些困难。

我似乎无法弄清楚每当选中复选框和单选按钮时如何更改它们的颜色。每当单击它们时，我都希望从默认值转到这些值。

我尝试编辑_input-group.scss文件，以便可以自定义代码：

.input-group-text {
    display: flex;
    align-items: center;
    padding: $input-padding-y $input-padding-x;
    margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
    @include font-size($input-font-size); // Match inputs
    font-weight: $font-weight-normal;
    line-height: $input-line-height;
    color: $input-group-addon-color;
    text-align: center;
    white-space: nowrap;
    background-color: $input-group-addon-bg;
    border: $input-border-width solid $input-group-addon-border-color;
    @include border-radius($input-border-radius);

    // Nuke default margins from checkboxes and radios to vertically center within.
    input[type="radio"],
    input[type="checkbox"] {
      margin-top: 0;
      background-color: #e5f0f8;
      color: #005db8; // checkmark color;

    }
  }

对于该大小，我创建了Bootstrap的_forms.scss文件的副本并覆盖了值：

 .form-check-input {
    position: absolute;
    margin-top: $form-check-input-margin-y;
    margin-left: -$form-check-input-gutter;
    width: 1.052rem; // changed default width
    height: 1.052rem; //changed default height

    &:disabled ~ .form-check-label {
      color: $text-muted;
    }
  }

我做错了什么？我愿意接受建议，谢谢。

Answer 1

据我所知，不可能覆盖浏览器的默认复选框和单选按钮，要实现您想要的功能，应将display: none;应用于默认的单选按钮和复选框，并自行制作自定义按钮。

为此，您可以查看以下指南：

• Styling Checkboxes and Radio Buttons
• w3schools

编辑：下面是一个简单但不是很简洁的示例：

/* hide the regular checkbox */

.pd-checkbox input {
  opacity: 0;
  position: absolute;
}


/* position the label */

.pd-checkbox input,
.pd-checkbox label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pd-checkbox label {
  position: relative;
}


/* style the unchecked checkbox */

.pd-checkbox input+label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  padding: 5px;
  margin-right: 10px;
  text-align: center;
  font-size: 17px;
  line-height: 15px;
}


/* style the checked checkbox */

.pd-checkbox input:checked+label:before {
  content: "\f00c";
  font-family: 'FontAwesome';
  background: #e9f0fb;
  color: #035fb7;
  border-color: #9cb1c4;
}


/* hide the regular radio button */

.pd-radio input {
  opacity: 0;
  position: absolute;
}


/* position the label */

.pd-radio input,
.pd-radio label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
  outline: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pd-radio label {
  position: relative;
}


/* style the unchecked radio button */

.pd-radio input+label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  padding: 5px;
  line-height: 15px;
  margin-right: 10px;
  text-align: center;
}

.pd-radio input+label:before {
  border-radius: 50%;
}


/* style the selected radio button */

.pd-radio input:checked+label:before {
  content: "\f111";
  font-family: 'FontAwesome';
  background: #e9f0fb;
  color: #035fb7;
  border-color: #035fb7;
}

<!-- Load the Font Awesome Library via CDN -->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

<p class="form-field checkbox1 pd-checkbox required no-label">
  <input id="checkbox1" name="checkbox1" onchange="" type="checkbox" value="">
  <label class="inline" for="checkbox1">Checkbox</label>
</p>

<p class="form-field  radio1 pd-radio required  no-label  ">
  <span class="value">
 <span class="" style="">
 <input type="radio" name="radioButton" id="radioButton" value="" onchange="">
 <label class="inline" for="radioButton">Radiobutton</label>
 </span>
  </span>

</p>

注意：：我只是在上面使用CSS来获取更多说明和代码段。

在这里，我们得到了SCSS代码：

$color_1: #035fb7;
$font_family_1: 'FontAwesome';
$border_color_1: #9cb1c4;
$border_color_2: #035fb7;
.pd-checkbox {
  input {
    opacity: 0;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &:checked&+label {
      &:before {
        content: "\f00c";
        font-family: $font_family_1;
        background: #e9f0fb;
        color: $color_1;
        border-color: $border_color_1;
      }
    }
  }
  label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
  }
  input&+label {
    &:before {
      content: '';
      background: #fff;
      border: 2px solid #ddd;
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      font-size: 17px;
      line-height: 15px;
    }
  }
}

.pd-radio {
  input {
    opacity: 0;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    outline: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &:checked&+label {
      &:before {
        content: "\f111";
        font-family: $font_family_1;
        background: #e9f0fb;
        color: $color_1;
        border-color: $border_color_2;
      }
    }
  }
  label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    outline: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
  }
  input&+label {
    &:before {
      content: '';
      background: #fff;
      border: 2px solid #ddd;
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      padding: 5px;
      line-height: 15px;
      margin-right: 10px;
      text-align: center;
      border-radius: 50%;
    }
  }
}

Answer 2

我也试图夸大引导检查和广播，但我认为这是不可能的。然后我使用自定义scss。这可能会对您有所帮助。

scss

/* Customize the label (the container) */
.custom-check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Hide the browser's default checkbox */
    input[type=checkbox] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #fff;
        border: 1px solid #E1E6EB;
    }

    /* On mouse-over, add a grey background color */
    &:hover input ~ .checkmark {
        background-color: #ffffff;
    }

    /* When the checkbox is checked, add a blue background */
    input:checked ~ .checkmark {
        background-color: #ffffff;
        border: 1px solid #E1E6EB;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: url('data:image/svg+xml;charset=UTF-8, <svg width="14px" height="11px" viewBox="0 0 14 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="latest-from-careems-1.0(messages)" transform="translate(-326.000000, -546.000000)" fill="#0B97B7" fill-rule="nonzero"> <g id="tick-inside-circle" transform="translate(326.000000, 546.000000)"> <polygon id="Shape" points="1.97807018 5.1245614 0.75 6.35263158 4.69736842 10.3 13.4692982 1.52807018 12.2412281 0.3 4.69736842 7.84385965"></polygon> </g> </g> </g> </svg>');
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    input:checked ~ .checkmark:after {
        display: block;
    }

}

//custom radio
.custom-radio {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 18px;
    font-family: cormorantlightitalic;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Hide the browser's default radio button */
     input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom radio button */
    .checkmark {
        position: absolute;
        top: 5px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 1px solid #E1E6EB;
        border-radius: 50%;

        /* Create the indicator (the dot/circle - hidden when not checked) */
        &:after {
            content: "";
            position: absolute;
            display: none;
        }
    }

    /* On mouse-over, add a grey background color */
    &:hover input ~ .checkmark {
        background-color: #fff;
        border: 1px solid #0093B4;
    }

    /* When the radio button is checked, add a blue background */
     input:checked ~ .checkmark {
        background-color: #fff;
         border: 1px solid #0093B4;
    }

    /* Show the indicator (dot/circle) when checked */
     input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .checkmark:after {
        top: 5px;
        left: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #0093B4;
    }
}

.custom-check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.custom-check input[type=checkbox] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.custom-check .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #e1e6eb
}

.custom-check:hover input~.checkmark {
    background-color: #fff
}

.custom-check input:checked~.checkmark {
    background-color: #fff;
    border: 1px solid #e1e6eb;
    display: flex;
    justify-content: center;
    align-items: center
}

.custom-check .checkmark:after {
    content: url('data:image/svg+xml;charset=utf-8,<svg width="14" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M1.978 5.125L.75 6.353 4.697 10.3l8.772-8.772L12.241.3 4.697 7.844z" fill="%230B97B7" fill-rule="nonzero"/></svg>');
    position: absolute;
    display: none
}

.custom-check input:checked~.checkmark:after {
    display: block
}

.custom-radio {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 18px;
    font-family: cormorantlightitalic;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.custom-radio .checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #e1e6eb;
    border-radius: 50%
}

.custom-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.custom-radio:hover input~.checkmark,
.custom-radio input:checked~.checkmark {
    background-color: #fff;
    border: 1px solid #0093b4
}

.custom-radio input:checked~.checkmark:after {
    display: block
}

.custom-radio .checkmark:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0093b4
}

<label class="custom-check">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<br><br>


<div class="form-check form-check-inline">
  <label class="custom-radio">Call
  <input class="form-check-input" type="radio" name="contact_type" id="exampleRadios1" value="Call" checked>
  <span class="checkmark"></span>
  </label>
</div>

<div class="form-check form-check-inline">
<label class="custom-radio">Email
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios2" value="Email">
<span class="checkmark"></span>
</label>
</div>