My checkbox does not stay checked once clicked (styling checkbox with css)

Question

I am using React and pure CSS to create a checkbox list and style them.

Without styling my checkbox works perfectly, it stays checked and registers the right value.

However, when I add the styling, if I click on a checkbox, the "check" does not stay. Basically, if I hove ron the checkbox the "check" appears, but if I click it, the "check" does not persists.

My checkbox component

import React from 'react';
import '../mystyles/Dropdown.css'


function Jurisdictions(props) {
  const [selectedOpts, setSelectedOpts] = React.useState(new Set());

  function handleChange(event) {
    const value = event.target.value;
    const checked = event.target.checked;

    if (checked) {
      selectedOpts.add(value);

    } else {
      selectedOpts.delete(value);
    }

    setSelectedOpts(new Set(selectedOpts));
    props.onChange && props.onChange(Array.from(selectedOpts.values()));
  }

  return (
    <div className="dropdown-jurisdictions">
      {props.options.map((opt) => (
        <label className="item-list" key={opt}>
          {opt}
          <input
            type="checkbox"
            name="opts"
            value={opt}
            onChange={handleChange}
            className="my-checkbox"
          />
        </label>
      ))}
    </div>
  )
}


export default Jurisdictions;

My CSS styling - Dropdown.css

.dropdown-jurisdictions {
  overflow-y: auto;
  overflow-x: none;
  height: 170px;
  width: 300px;
  text-align: left;
  color: #3D5A80;
}




.my-checkbox {
  display: none;
}


label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 5px;
}
label:before {
  line-height: 20px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #666666;
}

input[type=checkbox]:checked + label:before,
label:hover:before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}

I am pretty sure the problem is in my CSS but I cannot see the reason. Maybe because label is a not at the same level of my checkbox?

score 0 · Answer 1 · answered Oct 30 '19 at 13:19

0

Your checkbox component should have a property checked={this.props.checked} or something along those lines to indicate that it is in the checked state.

Your handleChange function should invert the state of your checked variable in state or props.

answered Oct 30 '19 at 13:19

psilocybin

920
5
22

It it not a React problem. My checkbox works fine, it is the CSS that it is not persistent when the checkbox is clicked. – Prova12 Oct 30 '19 at 15:00

score -1 · Answer 2 · answered Oct 30 '19 at 13:08

-1

Firstly you don't have a property called checked on input. I think you will need to add that property first. Though I don't think this would still work because the styling you are doing is of sibling and not to parent.

You can see this for parent element selector: Is there a CSS parent selector?

Hope this helps!

answered Oct 30 '19 at 13:08

Yash Joshi

1,895
1
5
12

It it not a React problem. My checkbox works fine, it is the CSS that it is not persistent when the checkbox is clicked. – Prova12 Oct 30 '19 at 15:00
1

You are using `checked` in `css` and you are not passing that attribute in `react`. Also, check the second part I have added a note about styling. – Yash Joshi Oct 30 '19 at 16:10

My checkbox does not stay checked once clicked (styling checkbox with css)

2 Answers2