Troubleshooting: My Custom Checkbox Style Is Not Functioning

I recently customized my checkboxes using CSS, and while they are working fine in Chrome, I encountered issues with Internet Explorer and Edge. In my search for a solution, I came across this helpful reference: ref

Here is the CSS code snippet that I used:

.checkbox-style {
   display: none;
}

.checkbox-style + label {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #C0C5C9;
    content: "";
    background: #FFF;
    align-items: center;
}

.checkbox-style[type="checkbox"]:checked + label:before {
    font-family: 'FontAwesome' !important;
    content: "\f00c";
    border: none;
    color: #015CDA;
    font-size: 12px;
    -webkit-text-stroke: medium #FFF;
    margin-left: -11px;
}

Below is the corresponding HTML markup:

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

Despite achieving the desired appearance for the checkbox, I am facing an issue where the :before pseudo-element of the label does not get created upon clicking the checkbox. As a result, the checkboxes remain uncheckable. What could be causing this problem?

csscheckbox

Answer №1

Your checkbox cannot be checked because it is set to display:none;. A common approach for custom checkboxes is to hide the actual checkbox (using opacity or visibility) and position it over a visually styled "fake" checkbox.

You can try implementing something like this:

body {
    padding: 50px;
}

.checkbox-wrapper {
    position: relative;
}

.checkbox-style {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
 }

        .checkbox-style + label {      
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #C0C5C9;
            background: #FFF;
            line-height: 14px;
            text-align: center;
        }

        .checkbox-style[type="checkbox"]:checked + label:before {
            font-family: 'FontAwesome' !important;
            content: "\f00c";
            border: none;
            color: #015CDA;
            font-size: 12px;
            -webkit-text-stroke: medium #FFF;
        }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

I have revised your CSS by concealing the checkbox using opacity and positioning it absolutely on top of the label.

I removed content: "" from the label, as it is only relevant for :before and :after pseudo-elements. I also eliminated align-items: center; since it is applicable to flexbox displays, not block elements like labels. Additionally, I aligned the line-height with the height (14px) and centered the checkmark icon using text-align: center.

The checkbox-wrapper is now positioned relatively to serve as an anchor for the hidden checkbox.

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

The Bootstrap image fails to adhere to the size of its parent flex container

I am having trouble positioning an image, heading, and a button on top of another image. The issue arises when viewing the content on small screens as the smaller image fails to resize properly and extends beyond the background of the larger holding imag ...

htmlcssbootstrap-4flexboxbootstrap-5

Eclipse Content Assist feature appears to be malfunctioning as it fails to display

Having an issue with Eclipse on Win 10 (64bit) when working with JavaScript projects. I've tested this problem on both Eclipse Photon and version 2018-09 (64 bit versions) and encountered the same problem on both instances: After creating a new JavaS ...

javascriptcsshtmleclipsecontent-assist

Bone structure template - optimizing list spacing with CSS

Currently, I am attempting to float my navigation bar further towards the left by at least 200px, closer to the end of the line visible below. However, every time I add a margin or padding, it causes the elements within the navigation bar to stack on top o ...

htmlcsslistalignment

Creating tabbed interfaces with JQuery

How do I build tabs using jQuery without displaying the content of all tabs until clicked? I have tried using this code, and it works well once a tab is clicked. However, when the page is refreshed, the content of both tabs is visible. jQuery (funct ...

jqueryhtmlcss

How can we use the nth-of-type selector to target a set of eight elements in a

I am trying to style a group of divs in such a way that every set of eight elements will have the same left positioning. Rather than just styling every eighth element individually, I want to apply the styling to groups of eight elements at once. However, ...

javascriptjquerycss

What is causing the issue with CSS properties and media queries not being effective on specific elements?

I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...

cssreactjssassbrowserdeveloper-tools

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

cssangularangular9mat-table

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

jqueryhtmlcss

What is the best way to create exclusive toggle buttons using jQuery?

I am currently working on a project where I need to create functionality for three buttons, each triggering a unique graph effect. The key requirement is that when one button is pressed, the other two should be deactivated along with their corresponding fu ...

javascriptjqueryhtmlcss

What is the method to create a resizable table column border rather than resizing the bottom corner border?

At the moment, we are able to resize the table border when we drag the corner. However, my goal is to enable resizing on the right side of the full border. https://i.sstatic.net/yFI24.png Below is the CSS code for resizing: th{ resize: horizontal; ove ...

javascripthtmlcsshtml-tableangular13

CSS failing to acknowledge specified div background

After successfully configuring the featured-top and footer elements in my CSS, I encountered an issue with a persistent white line appearing between them. Despite inspecting the elements in Google Chrome, I couldn't identify the source of this problem ...

htmlcss

The issue with the display grid position being set to absolute is causing functionality

Struggling to create an image catalog with cards containing text while using position absolute on the text and position relative on the card. Unfortunately, it's not working as expected. /*catalog style*/ .grid-container{ padding: clamp(5px,10vw,2 ...

htmlcsscss-positioncss-grid

Divs animated with jQuery keep on moving even after the animation has finished

My current project involves animating a single circle that scales, collides with two nearby circles, and then causes those circles to animate to specific positions. While everything works as expected, there is an issue where the two circles involved in the ...

javascriptjquerycssanimationjquery-animate

Unused DIV elements in jQueryUI are identified using XSLT

Just a heads-up, I'm new to xslt so please bear with me if this seems like a silly question. In my xsl:template I have created a div element like this: <div id="objectLocked"> This object is locked by another user. Do you want to remove the lo ...

htmlcssjquery-uixslt

Tips for creating an adjustable background image size

Is it possible to adjust the height of a section to match the background using CSS? Currently, the height is determined by the content within the section. CSS: .content-block { background-size: cover; background-position: center center; } HTML: &l ...

csshtml

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Sorry for the oversized images! I'm diving into media queries for the first time. When I adjust my browser window to 320px, here's how my site displays: This is what I want it to look like on mobile phones. However, when I view it on my iPhone, ...

iphonecssmobilemedia-queries

Is it possible to gradually open or close a div element?

Looking for a way to add an effect to the code below that opens/closes a div on mouseover above an image. Any examples or suggestions? I'm not exactly a javascript expert. HTML: <div> <div class="under"><img src="http://oi60.tinypic.c ...

javascriptjqueryhtmlcss

What could be causing the shadowbox not to display in Internet Explorer?

I am currently working on fixing a shadowbox issue in Internet Explorer. The page where the shadowbox is located can be found at this link: Here is the HTML code: <div class="hero-image"> <a href="m/abc-gardening-australia-caroli ...

javascriptjqueryhtmlcssshadowbox

What is the purpose of activating hover styles when tapping on mobile devices?

On my button, you can see the color change when hovering: button { background-color: orange; } button:hover { background-color: darkorange; } Check out this example: https://jsfiddle.net/oepb5ks4/ While this works well on desktop, it's a diffe ...

htmlcss

The influence of 'overflow' values, aside from 'visible', on the block formatting context

Not quite like this particular question on Stack Overflow, mine doesn't involve float issues but rather troubles with applying margins to a block-level element's only child. I encountered a dilemma while attempting to add a margin to an only-chi ...

htmlcss