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

【问题标题】：Overwrite Bootstrap 4's scss values for checkbox and radiobuttons覆盖复选框和单选按钮的 Bootstrap 4 的 scss 值
【发布时间】：2020-02-02 00:29:56
【问题描述】：

我目前正在尝试创建一个覆盖默认 Bootstrap 4.3.1 主题的自定义样式表，但我在使用 checkboxes 和 radiobuttons 时遇到了一些困难。

我似乎不知道如何在选中复选框和单选按钮时更改它们的颜色。每当单击它们时，我都想从默认值转到这些值。

我尝试编辑 _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;
    }
  }

我做错了什么？我愿意接受建议，在此先感谢您。

【问题讨论】：

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

我也尝试过改写引导检查和收音机，但我认为这是不可能的。然后我使用自定义 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>

【讨论】：

【解决方案2】：

据我所知，覆盖浏览器默认复选框和单选按钮是不可能的，为了实现您所寻求的，您应该将display: none; 应用于默认单选和复选框按钮并自己制作自定义按钮。

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

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

/* 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 来获得更多的插图和代码 sn-ps。

这里我们得到了 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%;
    }
  }
}

【讨论】：

是的，我会根据你的需要分享一个编辑。
@ZombieChowder 你可以检查你想要的编辑答案。