What is the reason the default state of a checkbox does not show a background-color change, while the checked state does?

.checkbox__container { 
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;

  & input[type="checkbox"] { 
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    accent-color: red;
    background-color: red;
    border: 1px solid #575352;
    border-radius: 1px;
    flex: none;
    order: 0;
    flex-grow: 0;

    &:hover { 
      background-color: red; 
      accent-color: red;
      border: 1px solid #575352;
      border-radius: 1px;
      flex: none;
      order: 0;
      flex-grow: 0;
    }

    &:checked { 
      accent-color: #0A8276;
      border-radius: 1px;
      flex: none;
      order: 0;
      flex-grow: 0;

      &:hover { 
        accent-color: #08665C;
        border-radius: 1px;
        flex: none;
        order: 0;
        flex-grow: 0;
      }
    }
  }
}

When interacting with the checkbox, the specified styles are applied correctly to the checked state and hover over it. However, there seems to be an issue with applying these styles to the default non-checked state.

We need to troubleshoot why the default state is not displaying the expected background color change as defined in the SCSS file.

htmlcsssass

Answer №1

Modifying the CSS of default HTML form controls is limited. Certain properties like background colors and borders for text inputs can be adjusted, but to fully customize checkboxes and other input elements, custom checkboxes/entries need to be created.

Reference: Custom Checkboxes

.container {
  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 */
.container input {
  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: #eee;
}

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

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

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</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

Trouble with white space on Hero Image? Tackling coding for the first time!

Currently a creative designer diving into the world of coding, I am eager to enhance my knowledge of HTML and CSS. Recently, I incorporated a hero image into my design but noticed some white gaps appearing on the sides. Strangely enough, it doesn't s ...

htmlcss

Personalized Bootstrap grid rows and columns

https://i.sstatic.net/R0yFY.png As a beginner in Bootstrap, I am having trouble achieving this specific layout in Bootstrap 4 grid. The areas marked in red are not appearing as expected. Here is what I have attempted so far: <div class="row"> ...

cssbootstrap-4

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Creating a suggestion box within an HTML container using JavaScript

https://i.sstatic.net/Asi5r.pngI am currently working on a page where users can click on a word and receive a small suggestion box (like a tiny popup) to choose synonyms they prefer. Although I believe this can be achieved with JavaScript, I haven't ...

javascriptjqueryhtmlcssajax

Adjust the checkbox dimensions within the cells of a bootstrap table

I am utilizing bootstrap-table along with a column containing checkboxes. I need to adjust the size of the checkboxes in my code to be 25x25 pixels. However, when I try using the height and width CSS attributes, it does not seem to take effect. html < ...

jquerycsstwitter-bootstraptwitter-bootstrap-3bootstrap-table

Mobile responsiveness issue with menu not functioning as expected

I'm completely new to the world of responsive design with CSS. I recently created a responsive menu that works perfectly when I resize the browser window on my computer. However, when I try to access the site on my phone, the menu is just zoomed out a ...

jqueryhtmlcssresponsive

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...

jquerycss

Mobile Menu in wordpress stays visible after being clicked

I recently created a one-page layout that includes some links. However, when I view the site on my smartphone and open the main menu using the button to click on a link (which scrolls within the same page), I noticed that the mobile menu remains visible a ...

javascriptjquerycsswordpress

Utilize the div element to segment a webpage into four different sections

Within a div tag, I have used 4 other div tags to create equal areas. Is there an alternative method to achieve this division or improve it? <div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;"> ...

htmlcss

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

javascriptjqueryhtmlcssajax

Aligning columns to the right in Bootstrap, featuring an unordered list without any text wrapping

I am trying to prevent the lines from overflowing onto the next line. The details should all be on the same line. I have attempted a solution, but it's not working as expected. https://i.sstatic.net/MYgv5.png <div class="container"> <div cla ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-4

Steps for creating a resizable and automatically hiding side menu

I am working on a side menu that can be resized, and I want it to collapse (set to zero width) when it is empty. I have considered implementing one of these features individually, but I'm not sure how to make both work together. Is there a way to ad ...

javascriptcssvue.js

Ways to increase the spacing between several menus

Need help with spacing between menus Tried using margin left and margin right but it's not working File: _Layout.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport&quo ...

htmlcssasp.net-mvcbootstrap-4

If a <section> element contains a <header>, must it also include a <footer>?

Here is the current state of my code: <section id="one"> <h2>Section Title</h2> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> <section id="two"&g ...

html

Utilizing pseudo elements (after) in CSS with the font family in Font Awesome 6 fails to function properly

I am attempting to create the div using CSS after pseudo-element and I have included the Unicode in the content with the font family being "Font Awesome 6 Free". However, nothing is showing up and I'm not sure why. Can someone please assist me? Here i ...

htmlcssfont-awesome

How can you successfully submit empty <select ... multiple> HTML elements via POST method?

Within my HTML form, I have incorporated a multi-select box that allows users to select multiple options at once. <select id="eng_0" name="eng_0[]" multiple size="3"> <option value="Privilégier">Privilégier</option> <option valu ...

jqueryhtmlmulti-selecthtml-select

Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...

javascripthtmlcsssvg

Tips for adjusting an image to fit your carousel

I am dealing with a carousel that has fixed dimensions (e.g., width=800px, height=450px), but the images I want to display in it have varying aspect ratios (16 : 9, 16:10, 1:1, etc.) and are larger than the carousel itself. I am attempting to resize all th ...

cssbootstrap-4

What is the best way to display an overlay internal link on top of the current one after it has been clicked

I am looking to create a button that, when clicked, will slide in a different page link and modify the URL to cover 80% of the website, while keeping the previous page in the background. Upon closing, the URL will revert back to the original one. I have c ...

javascripthtmljquerycssoverlay