Not able create green checkbox in html

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
LVL 1
Bharath A.KAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Zakaria AcharkiAnalyst DeveloperCommented:
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
Bharath A.KAuthor 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.

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

with green tick
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
Determine the Perfect Price for Your IT Services

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

Julian HansenCommented:
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
Bharath A.KAuthor 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
Bharath A.KAuthor 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
Julian HansenCommented:
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.
Bharath A.KAuthor 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
Julian HansenCommented:
Maybe a caching issue - but glad you are sorted.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
css3

From novice to tech pro — start learning today.