Tips for customizing checkbox appearance when the checkbox and label are contained in separate div elements

Hi there, I have a specific design requirement where I've created separate div sections for checkbox and label elements. I'm having trouble styling the checkbox when these elements are placed inside divs. Everything works fine when the checkbox and label are used without div sections, but once I add the divs, the styling doesn't work as expected. I've searched for solutions in various forums, but none of them seem to be solving my issue. Can anyone please take a look and assist me with this?

Useful links: How to Checkbox and label style only with CSS Forms, separate div for labels and inputs

.checkbox input[type=checkbox] + .checkmark label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox  input[type=checkbox] + .checkmark label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox input[type=checkbox] + .checkmark label:active:before {
  transform: scale(0);
}

.checkbox input[type=checkbox]:checked + .checkmark label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.checkbox input[type=checkbox]:disabled + .checkmark label:before {
  transform: scale(1);
  border-color: #aaa;
}

.checkbox input[type=checkbox]:checked:disabled + .checkmark label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}
<div class="checkbox">
    <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
</div>
  <div>
    <label for="fruit1" class="checklabel">Apple</label>
</div>

htmlcss

Answer №1

Spelling mistake checkcon to checbox or Adjust Some HTML Element Positions 

.checkbox input[type=checkbox] +  label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox  input[type=checkbox] +  label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox  input[type=checkbox] + label:active:before {
  transform: scale(0);
}

.checkbox  input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.checkbox  input[type=checkbox]:disabled +  label:before {
  transform: scale(1);
  border-color: #aaa;
}

.checkbox  input[type=checkbox]:checked:disabled +  label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}
<div class="checkbox">
    <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
    <label for="fruit1" class="checklabel">Apple</label>
</div>

Answer №2

Consider applying a consistent class to the checkbox input element

<input class="checkbox-input" type="checkbox" id="fruit1" name="fruit-1" value="Apple" />

Answer №3

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).parent().addClass("selected");
    } else {
        $(this).parent().removeClass("selected");
    }
});
.checkbox + .checkmark label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox  + .checkmark label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox + .checkmark label:active:before {
  transform: scale(0);
}

.checkbox.selected + .checkmark label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.checkbox input[type=checkbox] + .checkmark label:active:before {
  transform: scale(0);
}

.checkbox input[type=checkbox]:checked + .checkmark label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="checkbox">
    <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">    </div>
  <div class="checkmark">
    <label for="fruit1" class="checklabel">Apple</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

Attempting to embed a Java applet into an HTML document

Here is how the directory looks: test.html blah hmmm In the "blah" directory, we have all the applet files, including blahBlah.class. In the "hmmm" directory, there are additional class files taken from a library or similar source that are also used by t ...

javahtmlappletlocalhost

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Apply a single CSS bounce animation to a specific div when clicked

I have implemented a CSS map pin with some CSS3 animations. You can check it out here: https://jsfiddle.net/xg7xfzeq/ body { background: #e6e6e6; } .pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #00cae9; position ...

javascriptcss

What's the best practice - using async in the script tag or placing the scripts at the bottom of the html file?

Which is more effective: implementing the async attribute on the script tag or placing the script tag at the end of the HTML document? ...

javascripthtml

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

javascripthtmlcss

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

My website is equipped with various JS click/mouseover/mouseout/scroll events and incorporates several JS libraries to operate features such as carousels, bootstrap modal pop-ups, and more. I am looking to halt all events on a specific element. Although I ...

javascriptjqueryhtmladdeventlistenerevent-listener

Utilizing jQuery to effortlessly generate parent and child elements in a single function call

Is it possible to create multiple elements with the same function? Currently, I am able to split a number of list items like this: <ul class="dropdown-menu"> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> ...

jqueryhtml

The placement of buttons in a responsive web design

Need help with adjusting button positions in mobile mode relative to text. Tried using different position settings like absolute and relative, but buttons are not staying aligned with the text on mobile devices. Can anyone assist? .button { display: b ...

htmlcss

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

javascripthtml

Is it necessary to have col-xs-12 in Bootstrap 3?

In order to achieve the desired display for different screen sizes, we have implemented the following code: <div class="col-md-6">left</div> <div class="col-md-6">right</div> When viewed on smaller screens than md, this code succe ...

csshtmltwitter-bootstrap

Encountering a 'redirect' error within the views.py file of a Django project

The registration form is working smoothly, however, I am encountering an issue with the redirect function in addUser. Upon attempting to save data in the admin panel, I am facing an error during the redirect process. from django.shortcuts import render,r ...

htmldjangopython-3.xdjango-2.1

Having issues with the functionality of Bootstrap 4 sticky-top feature

How can I make the sidebar stick to the top across different screen sizes? It works fine for smaller screens up until the 'sm' breakpoint, but beyond that, it doesn't stick. I've tried adjusting the order of class names, but it didn&apo ...

htmlcssbootstrap-4

Retrieving the country code using Google Maps in conjunction with HTML 5 GeoLocation

I've been working on a project that involves using HTML 5 GeoLocation to retrieve longitude and latitude coordinates, and then utilizing the Google Maps API to obtain the corresponding country code based on those coordinates. However, I seem to be enc ...

htmlgoogle-maps-api-3

The script for tracking cursor coordinates is incompatible with other JavaScript code

<html> <script language="javascript"> document.onmousemove=function(evt) { evt = (evt || event); document.getElementById('x').value = evt.clientX; document.getElementById('y').value = evt.clientY; document.ge ...

javascripthtmlbrowser

Using jQuery to create a div that animates when scrolling

Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...

jquerycss

How to position a static element using CSS

I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...

htmlcsspositionfixed

Tips for dynamically inserting JSON data into HTML elements

{ "top10": [ { "state": "red", "claimed": true, "branch": "release-2.3.4", ...

javascriptjqueryhtmljson

Email confirmation based on checkbox status in PHP contact form

My goal is to make my file called send_form_email.php work by sending an email with a way to indicate which checkboxes are checked. Right now, it sends the form successfully, but doesn't include any information about the checked items. The following ...

phphtml

Align the list at the center within a div container

Struggling to align my image gallery within a designated div. Currently facing an issue where the icons appear too small and not perfectly centered. This is the CSS and HTML I currently have: <div id="social"> <ul> ...

csslisticonscenter

Placing the Cloud Icon at the Center Right of the Navigation Border Background

I am in the process of creating a vertical navigation bar and I have the intention to include a cloud icon that is centered at the right border, positioned directly on the background line. <nav> <ul> <li><a href="#"> ...

cssflexboxresponsive-design