Alter the background-color of the parent div when an input is checked using CSS

    .chk-circle {
    width: 8px;
    height: 8px;
    background: #afb0b5;
    border-radius: 100%;
    position: relative;
    float: left;
    margin-top: 4px;
    margin-right: 8px;
    }
    
    .chk-circle label {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 100px;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    background: #fff;
    }
    
    .chk-hide {
      visibility: hidden;
    }

    .chk-circle input[type=checkbox]:checked + label {
    background: #63a70a;
    }
  <div class="chk-circle">
      <input class="chk-hide" type="checkbox" id="chk1"/>
  <label for="chk1"></label>
  </div>

Upon clicking on the checkbox, the outer circle will change to green as shown below:

https://i.stack.imgur.com/j0vub.png

I attempted to make the outer circle turn green when the input is checked, but encountered an issue where the opposite behavior occurred. Here is what I tried:

https://i.stack.imgur.com/YiLCA.png

htmlcss

Answer №1

Give this a try:

Use the border property like so:

Updated

I have added the i tag for creating bullet points. To increase the size of the bullet, adjust the width & height of the I tag. I also included text in the label. Both conditions are functioning correctly.

.chk-circle input[type=checkbox]:checked + i {
      top:0;
      left:0;
      border:2px solid green;
    }


.chk-circle > i {
  position:relative;
  float:left;
    display: block;
    width: 6px;
    height: 6px;
  margin-top:5px ;
    border-radius: 100px;
    cursor: pointer;
     z-index: 1;
  border:3px solid #ddd;
    background: #fff;
  cursor:pointer;
}

.chk-circle > label{
  cursor:pointer;
  margin:0 10px  auto;
  
 }
.chk-hide {
  visibility: hidden;
}
.chk-circle > input[type=checkbox]:checked + i{
  border:3px solid green;
}
<div class="chk-circle">
   <label for="chk1">some 1</label>
  <input class="chk-hide" type="checkbox" id="chk1"/>
<i></i>
</div>
<div class="chk-circle">
   <label for="chk2">some 2</label>
  <input class="chk-hide" type="checkbox" id="chk2"/>
<i></i>
</div>
<div class="chk-circle">
   <label for="chk3">some 3</label>
  <input class="chk-hide" type="checkbox" id="chk3"/>
<i></i>
</div>

Answer №2

Experiment with the border-color attribute:

.checkbox-round input[type=checkbox]:checked + label {
    border-style: solid;
    border-color: #0f0;
}

Answer №3

div {
    background: pink;
    width: 50px;
    height:50px;
}
input[type=checkbox]:checked+div{
  background: green;
}

input[type=checkbox]:checked + div p {
    background: blue;
}
<input type="checkbox" checked>
<div>
   <p>Test</p>
</div>

Answer №4

if you decide to modify the layout of your html:

<input class="chk-hide" type="checkbox" id="chk1"/>
<div class="chk-circle">
 <label for="chk1></label>
</div>

you have the option to implement it in this way:

.chk-hide[type=checkbox]:checked +.chk-circle {background: green;}

Illustration

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

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular

Is there a way to seamlessly integrate a PDF file into a KnockoutJS template without triggering any warnings from PDF plugins?

I am attempting to embed a PDF document in an HTML view, with the assistance of a Knockout ViewModel that supplies the URL for the document. I understand that the appropriate HTML element for this task is <object>, so my view looks like this: <di ...

htmlknockout.js

What is causing .attr('title') to retrieve the title of the element before?

UPDATE Flexslider now includes several callback spaces for use, making this functionality possible. after: function(){}, //Callback: function(slider) - Fires after each slider animation completes Thank you to everyone who contributed! LIVE CO ...

javascriptjqueryhtmlflexslider

What is the best way to ensure that the text input in a text area is linked to a particular radio

I have created a form that contains radio buttons. My next goal is to include a text area next to each group of radio buttons. This will allow the user to select an option either by clicking on the radio button or by typing in the corresponding value in t ...

htmlformsradio-buttontextareaentity-relationship

Implementing a persistent header on a WordPress site with Beaver Builder

My website URL is: . I have chosen to use beaver builder for building and designing my website. I am in need of a fixed header that can display over the top of the header image. Here is the code snippet that I currently have: <div id="header">html ...

javascriptjqueryhtmlcsswordpress

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

What is the best way to apply "display: none;" on a span element nested within a title attribute?

I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons wh ...

javascripthtmlcssruby-on-rails

What is the best way to increase the size of a specific text style?

Recently, I created a post in WordPress that included some code samples. To ensure the code was displayed neatly, I utilized the "preformatted" style. However, upon previewing it, I noticed that the text within the code samples was incredibly small, almost ...

htmlcsswordpress

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...

javascriptjqueryhtmlcss

The slider thumb is not showing up properly on Microsoft Edge

Hey there! I'm experiencing an issue with the range slider's thumb display in Microsoft Edge. It appears to be positioned inside the track rather than outside as intended. Take a look at this snapshot for clarification: https://i.stack.imgur.co ...

javascriptjqueryhtmlcss

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

javascriptcss

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

javascriptjqueryhtmlarraysjson

Bootstrap Tags Input - the tagsinput does not clear values when removed

I am attempting to manually remove the input value from bootstrap-tags-input when the x button is clicked, but the values are not changing in either the array or the inputs. This is the code I have tried: $('input').tagsinput({ allowDuplica ...

javascripthtmljquerybootstrap-tags-input

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

javascriptcssangularjspopup

Discover the art of implementing linear gradient backgrounds in Tailwind css effortlessly

Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...

cssreactjsbackgroundtailwind-css

Different ways to adjust the appearance of table borders in HTML

I find myself at a standstill, hence why I am reaching out with this question. This Table presents itself with various border sizes and colors, along with similar complexities in the background of its cells. Could anyone provide me with guidance on how t ...

htmlcsscolorshtml-tableborder

Utilizing Bootstrap to arrange table cells in a shifted manner

I'm new to utilizing bootstrap in web development. I've been exploring various examples of bootstrap templates that include tables, and I noticed that when I resize my browser window, the table adjusts accordingly. Now, I'm curious to know ...

javascriptjquerycsstwitter-bootstrap

Transition the color of the button smoothly from btn-primary to btn-success

Can you make the btn-primary color button gradually change to the color of btn-success when a specific ID is clicked? I attempted to animate it with the clicked ID using this code: $(".add_to_cart").parent('.change-style-after-click[data-id="'+i ...

htmljquerybootstrap-4fadein

Customizing Material-UI: A guide to overriding inner components

Looking to customize the styles of a Material UI Switch for the small variation? I have applied global styles but now want to override the styles of elements like track and thumb. Targeting the root element with the sizeSmall class is working, but unsure o ...

cssreactjsmaterial-uijss