Update the scss values in Bootstrap 4 for the checkbox and radio button styles

Currently in the process of creating a custom style-sheet that overlays the default Bootstrap 4.3.1 theme, encountering some challenges specifically with styling the checkboxes and radiobuttons.

Struggling to find a way to change the color of checkboxes and radiobuttons when they are checked. Hoping to switch from the default appearance to this design upon click: https://i.sstatic.net/fdktS.jpg

Attempted to modify the _input-group.scss file in order to customize the code:

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

    }
  }

To adjust the size, duplicated Bootstrap's _forms.scss file and updated the values:

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

If there are any suggestions or corrections on what might be done incorrectly, they are greatly appreciated. Thank you.

csstwitter-bootstrapsassbootstrap-4

Answer №1

I attempted to customize Bootstrap checkboxes and radio buttons but found it challenging. Instead, I utilized custom SCSS which might be beneficial for your project.

SCSS

/* Customizing the label (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;

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

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

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

    /* Applying styles when checkbox is checked */
    input:checked ~ .checkmark {
        background-color: #ffffff;
        border: 1px solid #E1E6EB;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Creating the checkmark/indicator */
    .checkmark:after {
        content: url('data:image/svg+xml;charset=UTF-8, <svg>...</svg>');
        position: absolute;
        display: none;
    }

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

    /* Hiding the default radio button */
     input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

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

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

    /* Grey background color on mouse-over */
    &:hover input ~ .checkmark {
        background-color: #fff;
        border: 1px solid #0093B4;
    }

    /* Blue background when checked */
     input:checked ~ .checkmark {
        background-color: #fff;
         border: 1px solid #0093B4;
    }

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

    /* Styling the indicator (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><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>

Answer №2

From what I understand, it's not possible to overwrite the default styling of browser checkboxes and radio buttons. To achieve the desired customization, you will need to hide the default elements using display: none; and create your own custom versions.

If you're looking for guidance on how to do this, I recommend checking out the following resources:

  • Styling Checkboxes and Radio Buttons
  • w3schools

EDIT: Below is a simple example, though it may not be the most efficient or organized approach:

The CSS snippet:

/* Custom checkbox styles */

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

.pd-checkbox input,
.pd-checkbox label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

...

/* Custom radio button styles */

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

.pd-radio input,
.pd-radio label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

...

And here are the SCSS codes for reference:

$color_1: #035fb7;
$font_family_1: 'FontAwesome';
$border_color_1: #9cb1c4;
$border_color_2: #035fb7;

...

.pd-checkbox {
  input {
    ...
  }

  ...

  label {
    ...
  }
}

.pd-radio {
  input {
    ...
  }

  ...

  label {
    ...
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elements centered within a flex container are expanding and overflowing above

It seems like I'm missing a key point when it comes to my flexbox setup for vertical and horizontal centering. The issue arises when the container's height exceeds that of its parent, causing the content to extend beyond the top but remain fixed ...

htmlcssflexbox

Css technique for changing color on mouse hover

I currently have a social media bar on my website with icons for Facebook, Twitter, Google+, and RSS. Here is how it looks: When I hover over the icons, I want the circle around the image to change color to blue. However, every attempt I've made end ...

htmlcssimagehoveropacity

Partially loading CSS stylesheet

My directory structure looks like this.... iamdan > css > style.css The php file, named head.php, is located in a folder called includes within: iamdan > includes > head.php This file contains the following code: <head> <title ...

phpcssload

How to efficiently manage Bootstrap tabs that share the same ID

I am looking to consolidate two pieces of content with the same ID into one location. Currently, I have tabs for home, menu1, and menu 2, each with their own respective content tabs under menu 1. My goal is to combine both instances of menu 1 content into ...

javascripthtmlbootstrap-4

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

javascripthtmlcss

When I adjust the window size, the media queries cause the responsive side menu to quickly show and hide

After creating a responsive side menu that automatically appears when resizing the browser window, I encountered an unexpected issue. The side menu seems to appear and disappear quickly without clicking on the designated button. This particular problem is ...

javascripthtmlcssmedia-queriesside-menu

CSS: Inject Text at the End of Input Text's Value

Hey there, I'm facing a minor issue. The user wants to add some funny text to an input field if a specific condition is met. For example: Normal Condition: the input field shows "#{model.user}" Abnormal condition: the input field should display "# ...

javacssjsf

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

jquerycssaddclass

Steps to Resolve this Issue

Below is the code I used to convert PPT to IMG: <html> <head> <title>MyTutorialSite.com Tutorial</title> </head> <body> <?php $ppApp = new COM("PowerPoint.Application"); $ppApp->Visible = True; $strPa ...

phphtmlcss

The responsiveness of Bootstrap 4's col with col-sm-12 is questionable

Using Bootstrap 4, I have set up my website with 4 columns in 1 row. However, when viewing on mobile devices, I want the 4 columns to stack vertically instead of horizontally (essentially creating a new row for each column). I thought that adding col-sm-1 ...

twitter-bootstrapbootstrap-4

How Bootstrap 4 Handles Input Resizing功能

Encountering an issue with an input element inside a Bootstrap card. Trying to make it behave like the button on the second card, but it keeps shrinking and remaining in-line. I've attempted to add some CSS properties like min-width or adjusting its w ...

htmlcssbootstrap-4

How to use CSS to create two columns that adjust in height based on the content within

I am working with bootstrap columns and looking to ensure that the two columns, col-md-4 and col-md-8, have an equal height regardless of their content. The content in col-md-4 will vary, so I need a solution for them to maintain the same height. <div ...

cssstylesbootstrap-4multiple-columns

The css fails to display properly upon the page being reloaded using a button

While diving into the world of learning React JSX, I've encountered a perplexing issue. After clicking the load button, the page redirects correctly but the CSS styling I've implemented fails to display. Here is the HTML code snippet: <!DOCTY ...

javascripthtmlcssreactjs

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle

Hey there, I'm new to this and could really use your assistance, I'm looking for a simple show/hide toggle feature when clicking on an image, where it switches between a 'side arrow' and a 'down arrow' (similar to a dropdown) ...

javascriptjqueryhtmlcss

Implementing a universal font-size adjustment feature according to user preferences

Is it possible to allow users to choose the font size for the entire application, offering three options: Big, Medium, Small? If a user selects "Big", all fonts in the application will be resized globally. I have spent time researching this issue but ha ...

javascriptcssfontsfont-size

Automatically scrolling a div to the bottom in a React component

I am currently working on developing a chat application for my school project, and I would like to implement the feature that automatically scrolls to the bottom of the chat window. Despite trying various solutions and encountering React errors, I have not ...

javascripthtmlcssreactjsscroll

Exploring Website Layouts Across Various Screen Resolutions

I am facing an issue with my website layout. While it looks great on a 20" screen, on an 11" screen the elements are not displaying correctly. The #logo is overlapping the #menu, and the #bubble is appearing below the #frame. I had set percentage size para ...

htmlcssresolution

SCSS: When hovering over one div, display a different div

My goal is to display the elements in another div when hovering over a specific div. However, my current code does not seem to be working as expected. At the moment, there is no response upon hover and it remains non-responsive. I would greatly appreciate ...

htmlcssreactjssass

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

Tips for maintaining consistent styles in CSS for multiple websites

I am currently working on developing a customizable chatbot widget using react. The goal is to create a chatbot widget that can be easily integrated into any website, similar to the functionality of rasa-webchat. During testing on some websites, I encount ...

htmlcssreactjsmaterial-ui