Not able create green checkbox in html

coder
coder used Ask the Experts™
on
Hi Experts,

      I am not able to create Green checkbox.  Please the below image you can see the html code and css and gui(how it looks).  I am not able create Green checkbox
 
Capture.JPG

the html code I have is

input.green-check:checked {
  background-color:#5cb85c;
  border-color:#5cb85c;
}

Open in new window


react js code

           (<div className="checkbox checkbox-success">
                              <input type="checkbox" className="green-check" value={j.value} checked={j.selected} key={j.value}  onClick=
                            {(e) => this.props.actions.updateFacet(i.key,j.value,true,false)}
                          />
                           <label>{` ${label}${count}`} </label>
                          </div>)

Open in new window


the check box I need is
 
 test.jpgPlease help me in finding a solution.

With many thanks,

Bharath AK
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
There is a very good article on how to do this here https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
From that article
CSS
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Open in new window

HTML
 <label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label> 

Open in new window


Working sample here
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
I suggest the use of the simple "iCheck" Library for the highly customizable checkboxes and radio buttons.

Since you're using react especially I suggest the use of React-iCheck.

Live example HERE

Screenshot_2a.png
coderdeveloper

Author

Commented:
Hi Julian,

I had followed and tried the steps you mentioned.  But when I click the green tick doesnot come or it is not showing checked.

Please the following css and html

css
.full-checkbox {
    display: block;
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.full-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0px;
    left: 0px;
    height:15px;
    width:15px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.full-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.full-checkbox input:checked ~ .checkmark {
    background-color: #5cb85c;
}

/* Style the checkmark/indicator this is tick mark */
.full-checkbox .checkmark:after {
    left:4px;
    top:1px;
    width:7px;
    height:12px;
    border: solid white!important;
    border-width: 0 3px 3px 0!important;
    -webkit-transform: rotate(45deg)!important;
    -ms-transform: rotate(45deg)!important;
    transform: rotate(45deg)!important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.full-checkbox input:checked ~ .checkmark:after {
    display: block;
}

Open in new window



html code

<label class="full-checkbox" data-reactid="770">
<!-- react-text: 771 --> <!-- /react-text -->
<!-- react-text: 772 -->Newspaper (500)
<!-- /react-text -->
<input type="checkbox" value="newspaper" data-reactid="773">
<span class="checkmark" data-reactid="774"></span>
</label>

Open in new window

Please see the screenshot below.

 

When I make checked to true in the input I can see the green tick Please see with the checked = true for input

 

the react code I have is

 return (<label className="full-checkbox"> { `${label}${count}`}
                                   <input type="checkbox" value={j.value} checked={true} key={j.value}
                                   onClick = {(e) => this.props.actions.updateFacet(i.key,j.value,checked,false)} />
                                   <span className="checkmark"></span>
                                  </label>)

Open in new window


I had tried commenting the onclick and tested it, It has no influence or impact


Please help me in fixing this issue.

with many thanks,
Bharath AK
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
So what you are saying is that when you click the checkbox it is not being set to checked?

The styles worked off the checked status of the input - so if the styles are not working it is because the input is not being set checked.

Have you tried including the checked property in the <input> and binding it to the value? So when the value is true the checked property is set to true
coderdeveloper

Author

Commented:
Hi Julian,

     I had set it to true or checked in the input from the coding hence it was green checked, you can see it from one of the above images.  But when I click from GUI, it is not getting set or green checked.  I am not getting how to bind it to a value. please through some light.  or Do I have to use "for" attribute on the label to bind the checkbox?

With Many thanks,
Bharath AK
coderdeveloper

Author

Commented:
Hi Julian,

       It is my bad.  I had found when clicking on the text or label it is working fine, but not on square check box.  I will test this tommorrow and fix it and let you know when it is working completely.

With Many thanks

Bharath AK
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Default browser behaviour is that clicking the box (which is hidden in this case) or the label for the checkbox will select the box.

If this is not working try giving your checkbox an id and then add the for="checkboxid" to the label.
coderdeveloper

Author

Commented:
Hi,

       I had not made any changes after that, it started working normally.  I don't know why it was not working yesterday, I might have missed something.  Anyway, it is working fine now.

Thanks for providing me the sample.

With Many thanks,
Bharath AK
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Maybe a caching issue - but glad you are sorted.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial