Solving the challenge of HTML checkbox design

I have successfully styled checkboxes with a background color, but now I want each checkbox to have a different color without having to rewrite a lot of code for each one.

Check out the demo here

.checkbox {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    margin-right:10px;
    line-height:18px;
}

input[type=checkbox] {
    display:none;
}
.checkbox:before {
    content:"";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align:middle;
    background-color: red;
    color: #f3f3f3;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
}
.checkbox .pl {

    background-color: blue;

}

input[type=checkbox]:checked + .checkbox:before {
    content:"\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
}
<input id="Option" type="checkbox">
<label class="checkbox pl" for="Option">Option 1</label>
<input id="option2" type="checkbox">
<label class="checkbox" for="option2">Option 2</label>
<input id="option3" type="checkbox">
<label class="checkbox" for="option3">Option 3</label>
<input id="option4" type="checkbox">
<label class="checkbox" for="option4">Option 4</label>

In my attempt to make the first checkbox blue, I encountered some issues. I am aware that I could achieve this by replicating the code for each checkbox, but I am searching for a more efficient solution.

htmlcss

Answer №1

To style checkboxes without adding classes in the markup, you can utilize attribute selectors. For example:

/* common style for all checkboxes */
.checkbox:before {
   content:"";
   display: inline-block;
   ...
}

/* specific background color */
[for="option"]:before { background: blue; }
[for="option2"]:before { background: red; }
[for="option3"]:before { background: yellow; }
[for="option4"]:before { background: green; }

The attribute selector has been supported since IE7

Answer №2

How about trying this approach:

.checkbox:nth-of-type(1):before {
    background-color: yellow;
}
.checkbox:nth-of-type(2):before {
    background-color: pink;
}
.checkbox:nth-of-type(3):before {
    background-color: green;
}
.checkbox:nth-of-type(4):before {
    background-color: orange;
}

The nth-of-type pseudo selector is really effective!

For instance, you can create alternating colors like this:

.checkbox:nth-of-type(2n-1):before {
    background-color: yellow;
}
.checkbox:nth-of-type(2n):before {
    background-color: pink;
}

Pretty cool, right?

Answer №3

Below is the essential code snippet you're looking for: 

.checkbox.pl:before {
    background-color: blue;
}

For a complete example, check out the code below: 

.checkbox {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    margin-right:10px;
    line-height:18px;
}

input[type=checkbox] {
    display:none;
}
.checkbox:before {
    content:"";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align:middle;
    background-color: red;
    color: #f3f3f3;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
}
.checkbox.pl:before {
    background-color: blue;
}

input[type=checkbox]:checked + .checkbox:before {
    content:"\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
}
<input id="Option" type="checkbox">
<label class="checkbox pl" for="Option">Option 1</label>
<input id="option2" type="checkbox">
<label class="checkbox" for="option2">Option 2</label>
<input id="option3" type="checkbox">
<label class="checkbox" for="option3">Option 3</label>
<input id="option4" type="checkbox">
<label class="checkbox" for="option4">Option 4</label>

Answer №4

There is an issue with your CSS

.checkbox .pl {

    background-color: blue;

}

The correct format should be

.checkbox.pl:before { // Remove the space!

    background-color: blue;

}

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

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one. As I compile my scss, this piece of code: .foo { ... &__bar { ... } } transforms into the expected output below: .foo { ... } .foo__bar { ... } However, I actually need it t ...

csswebpacksass

Challenges between Django and VSCode

As I dive into practicing website development with Django, I've encountered a problem while trying to save my work in VSCode and updating my local browser. It seems that only certain changes are being reflected. For example, when I delete code in my C ...

cssdjangovisual-studio-code

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

javascriptjqueryhtmlcssgoogle-visualization

Safari in iOS8 experiencing problems with -webkit-overflow-scrolling: touch;

Our team has been developing a web app for a client that functioned perfectly on iOS7 in Safari. However, upon testing the app on iOS8, some significant bugs were discovered. After a user opens and closes the sidebar, content within a <section style=" ...

htmlioscss

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

htmlcssflexbox

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

jqueryhtmlcsscss-transforms

Troubleshooting Django: Issue with template extension causing static image not to be found in child template

For my personal project, I decided to learn Django. Initially, I created two separate apps, "API" and "Search". As development progressed, I merged the search functionality into the API app and updated the views accordingly. I also designed a base template ...

htmldjangodjango-templatesdjango-staticfiles

Looking for assistance in creating a scrollable div element

I'm looking to create a scrollable div similar to the one shown on the page linked below for a large secondary navbar. This navbar will expand to the bottom of the page after the title and primary navbar. So when I scroll down the page, the title and ...

htmlcss

Incorporating the chosen value from a dropdown box as a variable in PHP

Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...

javascriptphpjqueryhtmlajax

What is the best way to ensure my <h5> element fits perfectly inside its parent div vertically?

Currently facing an issue with finding a solution to my problem. The challenge involves having a header tag nested within multiple divs. Below is the structure: <div class="card"> <div class="layout-left"> <div class="card-header"> ...

javascriptjqueryhtmlcss

Tips for getting flex-end to function properly in IE11

My attempt to implement justify-content: flex-end; for a DIV with hidden overflow content in IE11 was unsuccessful. Despite trying various approaches, I managed to create a basic code snippet that functions properly in Chrome but fails in IE11: .token- ...

htmlcssflexboxinternet-explorer-11

Personalize the file button for uploading images

I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this? <input type="file" />, which renders a choose button with text that says `no files chosen` in the sa ...

javascriptjquerycsshtml

Is there a way to generate inline block elements that occupy the full 100% width? Furthermore, can the second element contain an additional element that is revealed upon

Currently, I am working on a project that involves displaying images with text overlays. The text overlays are designed as inline blocks with varying background colors. One issue I encountered is that there is unwanted whitespace between the background co ...

htmlcss

Incorporating an external HTML page's <title> tag into a different HTML page using jQuery

I am faced with a challenge involving two files: index.html and index2.html. Both of these files reside in the same directory on a local machine, without access to PHP or other server-side languages. My goal is to extract the <title>Page Title</ ...

javascriptjqueryhtmlfrontend

JQuery does not immediately update the input value

I'm working on a jQuery placeholder that mimics the behavior of default placeholders in Chrome and Firefox for browsers that don't support it. However, I'm facing an issue where the placeholder div's HTML doesn't change as quickly ...

javascriptjqueryhtmlplaceholder

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...

javascriptcssanimationfrontend

Pulling a WooCommerce variable in PHP: A guide for JavaScript developers

I'm having some trouble executing PHP code that utilizes the WooCommerce variable to retrieve the order ID. add_action('add_meta_boxes', 'gen_order_meta_boxes'); function gen_order_meta_boxes() { add_meta_box( 'wo ...

javascriptphphtmlwordpresswoocommerce

Limit the display of an element to a single occurrence by utilizing jQuery cookies

I have a unique piece of HTML and JS code that showcases an eye-catching modal box. This remarkable feature is present on every page of my website. However, to enhance the user experience, I would like to ensure that this div element is displayed only once ...

jqueryhtml

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups https://i.sstatic.net/HxKEh.png The goal is to keep the height of the box consistent even when the description varies Here's my code ...

cssvue.jsvue-componentvuetify.js