Adjust the color of the label when the checkbox is marked, and make it red when the checkbox is left

Looking to create a customized checkbox due to challenges in styling the default HTML checkbox, I have attempted the following code. The checkbox functions properly when clicking on the label, but I am unable to change the border color of the label based on the checkbox's status. Any assistance, suggestions, or recommendations would be greatly appreciated.

input[type="checkbox"]{display:none;}
label{
  border:1px solid red;
  width: 15px;
  height:15px;
  display:block;
}
label + input:checked{
  border-color: blue;
}
<div>
  <label>
    <input type="checkbox">
  </label>
</div>

htmlcsscheckbox

Answer №1

If you wish to achieve a specific result with the hierarchy, it may not be possible without utilizing JavaScript due to the absence of a parent selector. One workaround would involve repositioning the label after the checkbox and making use of the adjacent sibling combinator +:

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

label {
  border: 1px solid red;
  width: 15px;
  height: 15px;
  display: block;
}

input:checked + label{
  border-color: blue;
}
<div>
  <input id="cb" type="checkbox">
  <label for="cb"></label>
</div>

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

What is the best way to set the screen height without needing to scroll vertically?

How can I make the orange and blue area extend to the end of the screen or have the full screen size minus the height of the navbar? When using `vh-100`, it fills the full height but creates a vertical scrollbar which is not desired. Is there a way in Boot ...

htmlcssbootstrap-4react-bootstrap

Horizontal scrolling overflow disrupts vertical overflow visibility

I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...

cssoverflow

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Positioning CSS for a Responsive Button

Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...

javascripthtmlcssangular

Custom view with spannable text functionality

Can a custom view be included in a spannable text? I've noticed various types of spannable objects in the android.text.style package, but I'm curious if it's possible to insert a custom view. Something like spanable.setSpan(CustomView, .. ...

androidhtmlandroid-viewandroid-spannable

Insert more text following the existing content

Is it feasible to include text using pseudo-elements ::after or ::before to a specific word? For example, I am interested in placing a PDF icon consistently beside the word "Download". [PDF] Download Alternatively, are there other methods available? ...

csspseudo-element

Positioning MDL cards in HTML documents

Seeking guidance on positioning MDL cards alongside existing text. I've attempted various methods without success so far, and the desired outcome has not been achieved. The goal is to have text aligned to the left (which is currently satisfactory) wi ...

htmlcssmaterial-designcss-positionmaterial-design-lite

Ensuring data validity in Angular 2 before enabling a checkbox

In my form, there is a checkbox for admins to edit user accounts. Each user object includes a boolean value isAdmin. I am trying to prevent users from editing their own account while still allowing them to view the values. However, no matter what I try, I ...

javascriptangularcheckbox

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

csshandlebars.js

Tips for choosing and deselecting data using jQuery

Is there a way to toggle the selection of data in my code? Currently, when I click on the data it gets selected and a tick image appears. However, I want it so that when I click again on the same data, the tick will disappear. How can I achieve this func ...

javascriptcssajaxjquery

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

javascripthtmlcssreactjs

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

javascriptjqueryhtmlcssforeach

Adding elements to a roster

Can anyone assist me with appending data from a csv file to an unordered HTML list? The csv file I have contains both single and grouped data for the list, as seen below: Test Group Name A,Test Link Name 1,Test URL 1 Test Group Name A,Test Link Name 2,Tes ...

javascriptjqueryhtml

Incorporate the class directly into the datepicker input element in a React JS component

Adding a class directly to the input element is what I am trying to achieve here.https://i.sstatic.net/qGGwD.png The class MuiInputBase-input needs to be added. This code pertains to a date picker. import { DateTimePicker, MuiPickersUtilsProvider } from & ...

htmlcssreactjsmaterial-ui

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

javascriptjqueryhtmlcssonclick

Fixed Sidebar Position Changes when Bootstrap Modal Closes

We are facing a peculiar issue in our React application involving a sidebar and a bootstrap modal. The problem arises when we click the "X" button in the modal, causing the sidebar to momentarily drop down the page before the modal closes. This strange be ...

cssreactjssassreact-bootstrap

Targeting child elements with CSS selectors

In my ecommerce software, I have a menu that I want to customize by making the main categories bold. I have attempted various methods, including the ones shown below, but I am struggling to target the correct elements (specifically those in capital letter ...

htmlcsscss-selectors

Unable to display favicon when using the include function

How can I add the favicon link to my website? In my header.php, I have added the link for my ico favicon, but when I try to include it in my index file, the favicon does not show up. I attempted to insert the favicon code directly into the index.php file, ...

phphtmlinclude

Tips for positioning text above a dashed line in the blade template using Laravel and Bootstrap 4

I am working on a small Laravel project where I need to pass the variable {{$docno}} to a blade template. Below is the code snippet in the blade file. <body> <div class="container-fluid"> <div class="text-center"> ...

csslaravelbootstrap-4

Position the div element below the navigation bar

I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...

csssails.js