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

ISP Blocks Flash Access

My innovative set of flash games has been adopted by numerous schools throughout the UK. However, I recently encountered an issue where one school was unable to load these Flash games... After reaching out to the school's Internet Service Provider (S ...

phpmysqlhtmlflash

Guide to customizing color themes using Twitter Bootstrap 3

Recently, I dove into the world of Twitter Bootstrap 3 without any prior experience with earlier versions. It's been a learning curve, but I managed to set up a WordPress theme using it as the framework. All my elements are in place, but they all see ...

htmlcsswordpresstwitter-bootstraptwitter-bootstrap-3

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

javacssseleniumappium

Ensure that any relevant information is placed adjacent to a floated image

I am currently designing a responsive webpage featuring images of people's faces placed next to descriptive text. At smaller screen widths, everything looks perfect. However, as the page widens, the text for one person starts next to the image of the ...

htmlcssimagecss-float

Leverage the power of JavaScript functions within the app.component.ts file of

I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...

javascripthtmlnode.jsangulartypescript

Disabling the final grid cell(s)

I am currently working on a 4 column grid in ReactJS. The grid includes various elements with images and text. I want to ensure that if there are five elements filled, the last three should be inactive so that each row always has four columns without any e ...

cssreactjs

Tips on expanding the content of a page all the way to the bottom of

Currently, I am facing an issue while working on a Joomla site where I am struggling to extend a page to the bottom of the screen. Attached is an image of the page: and below is the HTML code for the page: <div id="free_trial_page"> <div id="f ...

htmlcss

deactivating image mapping on mobile media screens

I'm looking to disable my image map on mobile screens using media queries. I've attempted to include some javascript in the head of my html file, but I encountered an error: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></s ...

javascriptjqueryhtmlcssimagemap

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

My express application successfully serves an HTML page from my disk when I initially make a GET request to "http://localhost:3000/" in the browser. Now, I am trying to access a JavaScript file that is located in the same directory on the disk as the HTML ...

javascripthtmlnode.jsexpress

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

javascripthtmljquerynode.jsajax

What is the best way to transmit the "theme" property to "Components" within a next.js application?

I'm currently working on a next.js app and dealing with the _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme } from '@arwes/design' import { ThemeProvider, Global ...

cssreactjsnext.jscomponentsreact-props

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively. It seems li ...

jqueryhtmlcssjquery-ui

When selecting an option in the burger menu, the dropdown does not react properly

I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly. The dropdown menu should push the other content downward, but currently, it overlaps. I have included the code for th ...

htmlcssdrop-down-menumedia-queries

Angular does not display results when using InnerHtml

I'm currently in the process of creating a weather application with Angular, where I need to display different icons based on the weather data received. To achieve this functionality, I have developed a function that determines the appropriate icon to ...

cssangularinnerhtml

What steps should I take to adjust the text size in my media query?

I'm facing a challenge with a media query to decrease the font size of a text. It seems like a straightforward task, yet I can't pinpoint the issue. HTML: <div class="fp-featured"> <div class="fp-title">TITLE</div> <p class ...

htmlcss

Overlap between sidebar and navbar

I am currently working on developing an admin panel for one of my projects. I designed a sidebar and implemented a standard bootstrap 4 navbar. However, I encountered a minor issue where the bootstrap 4 navbar is extending to the full width of the page ins ...

htmlcssbootstrap-4

Ways to address time discrepancies when the countdown skips ahead with each button click (or initiate a countdown reset upon each click)

Every time I click my countdown button, the timer runs normally once. But if I keep clicking it multiple times, it starts skipping time. Here are my codes: <input type="submit" value="Countdown" id="countdown" onclick="countdown_init()" /> <div i ...

javascripthtmlbuttoncountdown

Position the paper-icon-button so that it is aligned to the top-right corner of the scaffold

Looking for a way to... <core-scaffold id="core_scaffold"> <core-header-panel mode="seamed" id="core_header_panel" navigation flex> <core-toolbar id="core_toolbar"></core-toolbar> <core-menu valueattr="label" ...

htmlcsspolymer

Angular-ui does not support the ng-disable directive

<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3> <div class="vpn-cert" ng-controller="vpnController vpnCert"> <form method="post" name="userform" class="form-horizontal" id="u ...

htmlangularjsangular-ui

No content in Django's Bootstrap dropdown menu

I need assistance with extracting a list of objects and placing them in a dropdown menu. I have successfully achieved this, but the issue seems to be related to my HTML structure. Here is the code snippet from my HTML: <div class="dropdown"> < ...

htmlcssdjangotwitter-bootstrap