Creating personalized checkboxes

Trying to create custom checkboxes for different colors like red, blue, etc...

https://i.sstatic.net/IKqJH.jpg

Struggling to achieve the desired outcome

Utilizing Bootstrap 5.3: Attempting to learn by dissecting a bootstrap template with the desired result. Referencing the example (shop leftsidebar => filter-options): Initially, hid the standard checkbox by adding the code below into my scss (linked to Bootstrap class).

.form-check-input{
  border: 0;
  background: none;
}

For the color balls, here is the code somewhat inspired by the mentioned site

<div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                    <label class="checkbox-ring-size rounded-circle border border-1 border-danger">
                        <span class="checkbox-color-size rounded-circle bg-danger">

                        </span>
                    </label>
                    <label class="form-check-label font-philos-ita" for="flexCheckDefault">
                        RED
                    </label>
                </div>

These are the custom classes: checkbox-ring-size and checkbox-color-size, where one represents the outer line when selected

.checkbox-ring-size{
  width:14px;
  height:14px;
}

while the other is just the colored ball

.checkbox-color-size{
  width:10px;
  height:10px;
}

Feeling stuck and unsure how to make this custom checkbox clickable to indicate selection. Also, need to address the issue where clicking the area of the invisible Bootstrap checkbox still enables checking. Bootstrap template faces this issue as well, but its custom buttons function correctly.

Any assistance would be greatly appreciated, aiming to stick with Bootstrap as much as possible.

Answer №1

To enhance the styling of a checkbox, consider incorporating a second element nested within a parent element. Utilize the ::after pseudo-element along with the checkbox's :checked property. I have tailored a snippet of code from my personal project to address your query:

.checkarea input {
  position: absolute;
  cursor: pointer;
  height: 0;
  width: 0;
}
.customcheck {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 2px solid rgba(179, 179, 179, 0.7);
  border-radius: 30%;
}
.checkarea input:checked ~ .customcheck {
  background-color: hotpink;
}
.customcheck:after {
  content: "";
  position: absolute;
  display: none;
}
.checkarea input:checked ~ .customcheck:after {
  display: block;
}
.checkarea .customcheck:after {
  left: 7px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<label class="checkarea">
  <input type="checkbox" style="opacity: 0;">
  <span class="customcheck"></span>
</label>

NOTICE: Utilizing ::before or ::after directly on the checkbox element may not produce the desired outcome, as it is self-closing. For further details, refer to this resource.

Answer №2

One way to achieve this is by customizing the appearance of the checkbox without the use of labels. By setting the appearance property to none, and utilizing the :checked, ::before, and ::after pseudo selectors.

:root {
  --checkbox-radius: 20px;
  --checkbox-ring-distance: 2px;
}

[type="checkbox"] {
  position: relative;
  appearance: none;
  background-color: red;
  width: var(--checkbox-radius);
  height: var(--checkbox-radius);
  border-radius: var(--checkbox-radius);
  cursor: pointer;
  z-index: 0;
}

[type="checkbox"]:checked::after {
  position: absolute;
  outline: 1px solid red;
  content: '';
  width: calc(var(--checkbox-radius) + var(--checkbox-ring-distance)*2 );
  height: calc(var(--checkbox-radius) + var(--checkbox-ring-distance)*2 );
  border-radius:  calc(var(--checkbox-radius) + var(--checkbox-ring-distance)*2 );
  left: calc(var(--checkbox-ring-distance)*-1);
  top:  calc(var(--checkbox-ring-distance)*-1);
  z-index: -1;
}
<input type="checkbox" id="thecheckbox">
<label for="thecheckbox">checkbox</label>

If you prefer to use a label, you can achieve the same effect by using the next-sibling combinator:

:root {
  --checkbox-radius: 20px;
  --checkbox-ring-distance: 2px;
}

[type="checkbox"] {
  display: none;
}

label span {
  position: relative;
  background-color: red;
  width: var(--checkbox-radius);
  height: var(--checkbox-radius);
  border-radius: var(--checkbox-radius);
  cursor: pointer;
  z-index: 0;
  display: inline-block;
}

[type="checkbox"]:checked + label span::after {
  position: absolute;
  outline: 1px solid red;
  content: '';
  width: calc(var(--checkbox-radius) + var(--checkbox-ring-distance)*2 );
  height: calc(var(--checkbox-radius) + var(--checkbox-ring-distance)*2 );
  border-radius:  calc(var(--checkbox-radius) + var(--checkbox-ring-distance)*2 );
  left: calc(var(--checkbox-ring-distance)*-1);
  top:  calc(var(--checkbox-ring-distance)*-1);
  z-index: -1;
}
<input type="checkbox" id="thecheckbox">
<label for="thecheckbox"><span></span></label>
<label for="thecheckbox">checkbox</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

Designing GWT FlexTable using pure CSS styling

Is there a way to style a GWT FlexTable using CSS alone? The API doesn't provide information on available CSS classes. Are there no predefined classes and do I need to define them myself? I am particularly interested in styling the "th" element. ...

Modify the text when clicked on, but do not change the span

I'm currently attempting to change the text within an anchor (<a href=>) element when another element is clicked. The structure of the HTML is as follows: <h1> <a href=""> replace this text <span class="breadcrumb" ...

Stopping a function that is currently running on a website using Javascript

I have a script on my website that triggers a rain feature when a user clicks on a button. However, I am struggling to figure out how to allow the user to deactivate this feature. I've tried various methods such as using break, return, and timeouts, b ...

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

Tips for increasing the width of a button within an HTML table heading

I'm attempting to make a button within a table <th> expand to the full width and height of the header column, even if a table cell in the same column is larger than the text. If I set the width to 100% in CSS, the button ends up matching the siz ...

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Next.js Version 13.2.3 In Next.js, it is advised not to use the table element. "use client"; export default function index() { return ( <table> <tr> <th>Company</th> ...

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

tips for creating a mobile-friendly responsive button

I have been scouring the internet for a solution to this issue. Essentially, I am trying to position the button on the right side in desktop view. Here is an example: chrome view However, when the site is resized or viewed on mobile devices, the button sh ...

The standard color code applied to an HTML button

I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Currently, I am in the process of developing a map component using a JSON array and implementing a click event handler for each item. The objective is to toggle the CSS style to color the item when clicked, which is functioning as expected. However, my goa ...

What could be causing my Angular.js application to malfunction on IE7?

I have developed an Angular.js application that is working well on most browsers, but I am now facing compatibility issues with IE 7 and above. I have tried different approaches such as adding id="ng-app", using xmlns:ng, manually bootstrapping angular wi ...

The webpage is not displaying any results despite using .innerHTML with Ajax

I am currently developing a web application that displays query results using the Google Books API. While my code is functioning, I am encountering an issue where the .innerHTML method does not show any results on the HTML page. Below is the HTML code bein ...

jQuery form experiencing a small problem

I need assistance with a form that has four fields. Specifically, I am looking for a solution where the visibility of the County field is dependent on the selection made in the Country field. When UK is chosen in the Country field, I want the County field ...

Arranging divs within a wrapper, ensuring that one of them displays a vertical scrollbar when the content exceeds the space available

I'm currently facing a challenge with defining the height of the description box in order to achieve the layout shown. I am trying to find a solution without relying on javascript. https://i.stack.imgur.com/3j278.png At present, the wrapper and titl ...

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

html2canvas bottom margin

I coded this in react function download(element) { html2canvas(element).then((canvas) => { window.open(canvas.toDataURL('image/png')); }); } return ( <div className='box' onClick={( ...

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...