Fatal编程技术网
  • css/
  • 覆盖引导4'；复选框和单选按钮的scss值

覆盖引导4'；复选框和单选按钮的scss值

css twitter-bootstrap sass bootstrap-4

覆盖引导4'；复选框和单选按钮的scss值,css,twitter-bootstrap,sass,bootstrap-4,Css,Twitter Bootstrap,Sass,Bootstrap 4,我目前正在尝试创建一个覆盖默认引导4.3.1主题的自定义样式表，我在使用复选框和单选按钮时遇到了一些困难 我似乎不知道在选中复选框和单选按钮时如何更改它们的颜色。无论何时单击，我都想从默认值转到这些值 我已尝试编辑\u input-group.scss文件，以便自定义代码： .input-group-text { display: flex; align-items: center; padding: $input-padding-y $input-padding-x;

我目前正在尝试创建一个覆盖默认引导4.3.1主题的自定义样式表，我在使用复选框和单选按钮时遇到了一些困难

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

我已尝试编辑
\u 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;

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

据我所知，覆盖浏览器默认复选框和单选按钮是不可能的，为了实现您的目标，您应该应用
显示：无编码到默认的单选按钮和复选框按钮，并自己制作自定义按钮

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


    

  • 

  • 


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



/*隐藏常规复选框*/
.pd复选框输入{
不透明度：0；
位置：绝对位置；
}
/*定位标签*/
.pd复选框输入，
.pd复选框标签{
显示：内联块；
垂直对齐：中间对齐；
保证金：5px；
光标：指针；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.pd复选框标签{
位置：相对位置；
}
/*设置未选中复选框的样式*/
.pd复选框输入+标签：之前{
内容：''；
背景：#fff；
边框：2px实心#ddd；
显示：内联块；
垂直对齐：中间对齐；
宽度：15px；
高度：15px；
填充物：5px；
右边距：10px；
文本对齐：居中；
字号：17px；
线高：15px；
}
/*设置复选框的样式*/
.pd复选框输入：选中+标签：之前{
内容：“\f00c”；
字体系列：“FontAwesome”；
背景#e9f0fb；
颜色：#035fb7；
边框颜色：#9cb1c4；
}
/*隐藏常规单选按钮*/
.pd无线电输入{
不透明度：0；
位置：绝对位置；
}
/*定位标签*/
.pd无线电输入，
.pd无线电标签{
显示：内联块；
垂直对齐：中间对齐；
保证金：5px；
光标：指针；
大纲：无；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.pd无线电标签{
位置：相对位置；
}
/*设置未选中单选按钮的样式*/
.pd无线电输入+标签：之前{
内容：''；
背景：#fff；
边框：2px实心#ddd；
显示：内联块；
垂直对齐：中间对齐；
宽度：15px；
高度：15px；
填充物：5px；
线高：15px；
右边距：10px；
文本对齐：居中；
}
.pd无线电输入+标签：之前{
边界半径：50%；
}
/*设置所选单选按钮的样式*/
.pd无线电输入：选中+标签：之前{
内容：“\f111”；
字体系列：“FontAwesome”；
背景#e9f0fb；
颜色：#035fb7；
边框颜色：#035fb7；
}





复选框




单选按钮

据我所知，覆盖浏览器默认复选框和单选按钮是不可能的，为了实现您的目标，您应该应用
显示：无编码到默认的单选按钮和复选框按钮，并自己制作自定义按钮

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


    

  • 

  • 


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



/*隐藏常规复选框*/
.pd复选框输入{
不透明度：0；
位置：绝对位置；
}
/*定位标签*/
.pd复选框输入，
.pd复选框标签{
显示：内联块；
垂直对齐：中间对齐；
保证金：5px；
光标：指针；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.pd复选框标签{
位置：相对位置；
}
/*设置未选中复选框的样式*/
.pd复选框输入+标签：之前{
内容：''；
背景：#fff；
边框：2px实心#ddd；
显示：内联块；
垂直对齐：中间对齐；
宽度：15px；
高度：15px；
填充物：5px；
右边距：10px；
文本对齐：居中；
字号：17px；
线高：15px；
}
/*设置复选框的样式*/
.pd复选框输入：选中+标签：之前{
内容：“\f00c”；
字体系列：“FontAwesome”；
背景#e9f0fb；
颜色：#035fb7；
边框颜色：#9cb1c4；
}
/*隐藏常规单选按钮*/
.pd无线电输入{
不透明度：0；
位置：绝对位置；
}
/*定位标签*/
.pd无线电输入，
.pd无线电标签{
显示：内联块；
垂直对齐：中间对齐；
保证金：5px；
光标：指针；
大纲：无；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.pd无线电标签{
位置：相对位置；
}
/*设置未选中单选按钮的样式*/
.pd无线电输入+标签：之前{
内容：''；
背景：#fff；
边框：2px实心#ddd；
显示：内联块；
垂直对齐：中间对齐；
宽度：15px；
高度：15px；
填充物：5px；
线高：15px；
右边距：10px；
文本对齐：居中；
}
.pd无线电输入+标签：之前{
边界半径：50%；
}
/*设置所选单选按钮的样式*/
.pd无线电输入：选中+标签：之前{
内容：“\f111”；
字体系列：“FontAwesome”；
背景#e9f0fb；
颜色：#035fb7；
边框颜色：#035fb7；
}





复选框




单选按钮

我也尝试过对引导检查和无线电进行过度调整，但我认为这是不可能的。然后我使用定制的SCS。这可能对你有帮助

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;
    }
}



/*自定义标签（容器）*/
.海关检查{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择

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