Unable to activate check box button by clicking on it

Hi there! I am having trouble with a checkbox button on my website. The button appears fine, but for some reason it's not working properly (it doesn't get unchecked when clicked). Can anyone help me fix this issue? I'm still learning HTML and CSS so any assistance would be appreciated.

    
    <div class="col-sm-1 accept-box ">
            <input
              class=""
              type="checkbox"
              name="accept"
              value="accepted"
              checked
            /><label for=""></label>
          </div>

    input[type='checkbox'] + label {
    font-family: Proxima Nova,Open Sans,Corbel,Arial,sans-serif;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    position: relative;
    height: 1rem !important;
    width: 1rem !important;
    }

    input[type='checkbox']:checked + label::after {
    background: #FFF;
    border: 1px solid var(--link-default);
    border-width: 0 0.125rem 0.125rem 0;
    content: '';
    height: 0.875rem !important;
    left: 0.35rem !important;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 0.5rem !important;
    position: absolute !important;
    }
htmlcsstwitter-bootstrap-3

Answer №1

Always remember to provide the ID of the controlled element in its attribute for.

div {
  /* Custom styling for demonstration purposes */
  background-color: #000;
}

input[type='checkbox']+label {
  font-family: Proxima Nova, Open Sans, Corbel, Arial, sans-serif;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  position: relative;
  height: 1rem !important;
  width: 1rem !important;
}

input[type='checkbox']:checked+label::after {
  background: #FFF;
  border: 1px solid var(--link-default);
  border-width: 0 0.125rem 0.125rem 0;
  content: '';
  height: 0.875rem !important;
  left: 0.35rem !important;
  position: absolute;
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0.5rem !important;
}
<div class="col-sm-1 accept-box">
  <input id="accept" type="checkbox" name="accept" value="accepted" checked>
  <label for="accept"></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

Transforming video files into HTML5 ogg/ogv and mpg4 formats

Is there a reliable software out there that can effectively convert video files (such as avi, flv, etc.) to HTML5 supported ogg/ogv and mpeg4 formats? I have tested a few options but unfortunately none of them seem to get the job done correctly. ...

videohtmlmpeg

Executing a function within a ng-repeat iteration

Is there a way to call a method within an ng-repeat loop, even if the element does not exist at that moment? I'm facing this issue and I'm not sure how to resolve it... The ID seems to be correct. Strangely, when I run it in the console after ev ...

javascripthtmlangularjs

Can you explain the purpose of the spaces on the buttons?

mysterious button spacing issue <div class="buttons"> <button id="btn-search" type="submit">Search Engine</button> <button id="btn-lucky" type="submit">Feeling Lucky Today</button> </div> .buttons { max-width: 29 ...

htmlcss

Looping through ViewData strings and populating a form with their values

I am currently utilizing ASP.NET and MVC to work on a project where I need to take a list of strings and populate a form with them. The goal is for users to import account numbers, have the form prefilled with these numbers, and then submit the data. I&apo ...

javascripthtmlasp.net-mvcrazorviewbag

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

What is the best way to prevent text-decoration from being applied to icons when utilizing font-awesome inside a hyperlink?

I recently began using FontAwesome and it's been going well. However, I have a question about using it with an anchor tag that has text-decoration:none, and on hover text-decoration:underline. Whenever I hover over the link, the icon also receives the ...

cssfont-awesome

Creating a personalized image download feature in PhotoSwipe.js

I am currently working on a project that involves using the PhotoSwipe gallery. At line 175, there is code url:items[0].hqImage. I want to use the index of the current image instead of 0. How can I achieve this? I attempted to utilize the pswp.listen(&ap ...

javascriptjqueryhtmlphotoswipe

Converting a JSON array into a single concatenated string

Currently, I am parsing a JSON file that contains data about multiple users. { "SRM": [{ "title": "Firstname Surname", "image": "firstname", "subtitle":"the subtitle" }, { "title": "Firstname Surname", "image": "firstname", "s ...

jqueryhtmljson

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

javascripthtmljquerycsssharepoint

A guide on sending JavaScript variables to PHP using AJAX

I've been facing an issue while trying to pass the selected month from a select list in HTML using Ajax. Every time I select a month, it doesn't show up as expected. Initially, there's a placeholder "nothing" displayed due to the if-else con ...

javascriptphphtmlajax

Strange occurrences with the IMG tag

There seems to be an issue with my IMG element on the webpage. Even though I have set the height and width to 100%, there is some extra space at the end of the image. You can view the problem here: I have also included a screenshot from the developer too ...

css

Minimizing Unused Space After Media Query Adjustment

Using the bootstrap grid system, I am facing some uncertainties. I would like to create a header where there is a logo on the left and links on the right. Below this header, I want a menu that spans the same width as the content above. In my current setu ...

csstwitter-bootstrapmedia-queries

The onClick event is not executing my function

Having trouble triggering the onclick() event when trying to modify table data using ajax. Here's the code snippet: (the onclick() event is located in the last div tag) @{ ViewBag.Title = "Edit_Room"; Layout = "~/Views/Shared/_LayoutAdmin.csh ...

jqueryhtmlasp.net-mvconclickasp.net-ajax

flash animation on an HTML webpage (fancy pop-up)

Hey, I'm interested in creating a similar effect to this: Check out this example >> Simply click on "Start PicLens Lite Slideshow PicLens". Did you notice how the swf/flash loads on top of the regular page? I want to achieve that :-D If there ...

htmlflashpopuploader

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

csssafari

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

javascriptcssvue.jsvuetify.js

Manipulate PHP/SQL Form: Add, Remove, or Modify items

I have utilized the following code for managing a football fixtures and results administration website. The issue I am encountering pertains to the delete syntax (I suspect that there may be an error related to [ID]). Apart from that, everything else seems ...

phphtmlsqlsql-delete

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

htmlcsswordpress

I am interested in developing a program using Javascript or JQuery that can effectively capture the anchor text within <a></a> link tags

I want to automatically capture the link on my website and create a system where, when users click on a specific link, it opens the captured link in a new tab without requiring browser permission and replaces the current tab with a different link. For exa ...

javascripthtmljquery