3

I have a checkbox, although when clicked it does nothing, the css seems to be correct unless something has changed. It has a class appended to it.

This works when I remove the css although I think there is an error somewhere on the 'after'

  • Please see on JSFiddle *

https://jsfiddle.net/bLg5juxd/

.form-flat-radio,
.form-flat-checkbox {
  margin: 0;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 0 0 0 30px;
}

.dh-ie .form-flat-radio,
.dh-ie .form-flat-checkbox {
  padding: 0;
}

.form-flat-radio input,
.form-flat-checkbox input {
  left: -9999px;
  position: absolute;
}

.dh-ie .form-flat-radio input,
.dh-ie .form-flat-checkbox input {
  position: relative;
  left: auto;
}

.form-flat-radio i,
.form-flat-checkbox i {
  background: none repeat scroll 0 0 #fff;
  border-style: solid;
  border-width: 1px;
  display: block;
  height: 17px;
  left: 0;
  outline: medium none;
  position: absolute;
  top: 5px;
  border-color: #d5d5d5;
  width: 17px;
  top: 50%;
  margin-top: -8.5px;
  color: #1e1e1e;
}

.dh-ie .form-flat-radio i,
.dh-ie .form-flat-checkbox i {
  display: none;
}

.form-flat-radio i:after,
.form-flat-checkbox i:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}
<div class="form-flat-checkbox pull-left">
  <input type="checkbox" name="rememberme" id="rememberme" value="forever"><i></i>&nbsp;Remember Me
</div>

Improve this question
0

4 Answers 4

Reset to default
3

You need to wrap your custom input and text in a label with the for attribute set.

<div class="form-flat-checkbox pull-left">
   <input type="checkbox" name="rememberme" id="rememberme" value="forever">
   <label for="rememberme">
     <i></i>&nbsp;Remember Me
   </label>
</div>

In this case, you can also change the styling of the button to display: none;. I personally prefer this method over moving it off the page. Additionally, this provides the benefit of pressing the text to trigger the checkbox as well.

.form-flat-radio input,
.form-flat-checkbox input {
  display: none;
}

See: https://jsfiddle.net/bLg5juxd/4/

.form-flat-radio,
.form-flat-checkbox {
  margin: 0;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 0 0 0 30px;
}
.dh-ie .form-flat-radio,
.dh-ie .form-flat-checkbox {
  padding: 0;
}
.form-flat-radio input,
.form-flat-checkbox input {
  display: none;
}
.dh-ie .form-flat-radio input,
.dh-ie .form-flat-checkbox input {
  position: relative;
  left: auto;
}
.form-flat-radio i,
.form-flat-checkbox i {
  background: none repeat scroll 0 0 #fff;
  border-style: solid;
  border-width: 1px;
  display: block;
  height: 17px;
  left: 0;
  outline: medium none;
  position: absolute;
  top: 5px;
  border-color: #d5d5d5;
  width: 17px;
  top: 50%;
  margin-top: -8.5px;
  color: #1e1e1e;
}
.dh-ie .form-flat-radio i,
.dh-ie .form-flat-checkbox i {
  display: none;
}
.form-flat-radio i:after,
.form-flat-checkbox i:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}
.form-flat-radio input:checked + i:after,
.form-flat-checkbox input:checked + i:after {
  opacity: 1;
  background-color: red;
}
.form-flat-radio i {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.form-flat-radio i:after {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  top: 4px;
  line-height: 1;
  width: 7px;
  position: absolute;
  background: #1e1e1e;
}
.form-flat-checkbox i:after {
  content: "\f00c";
  position: relative;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}
.form-flat-checkbox i:after {
  font-size: 12px;
  height: 17px;
  left: -1px;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin-top: 2px;
  width: 17px;
  opacity: 0;
  filter: alpha(opacity=0);
  line-height: 1;
}
<div class="form-flat-checkbox pull-left">
   <input type="checkbox" name="rememberme" id="rememberme" value="forever">
   <label for="rememberme">
     <i></i>&nbsp;Remember Me
   </label>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

you just need wrap your text with label tag it'll work

<label for="rememberme">Remember Me</label>


.form-flat-radio,
.form-flat-checkbox {
  margin: 0;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 0 0 0 30px;
}
.dh-ie .form-flat-radio,
.dh-ie .form-flat-checkbox {
  padding: 0;
}
.form-flat-radio input,
.form-flat-checkbox input {
  left: -9999px;
  position: absolute;
}
.dh-ie .form-flat-radio input,
.dh-ie .form-flat-checkbox input {
  position: relative;
  left: auto;
}
.form-flat-radio i,
.form-flat-checkbox i {
  background: none repeat scroll 0 0 #fff;
  border-style: solid;
  border-width: 1px;
  display: block;
  height: 17px;
  left: 0;
  outline: medium none;
  position: absolute;
  top: 5px;
  border-color: #d5d5d5;
  width: 17px;
  top: 50%;
  margin-top: -8.5px;
  color: #1e1e1e;
}
.dh-ie .form-flat-radio i,
.dh-ie .form-flat-checkbox i {
  display: none;
}
.form-flat-radio i:after,
.form-flat-checkbox i:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}
.form-flat-radio input:checked + i:after,
.form-flat-checkbox input:checked + i:after {
  opacity: 1;
  filter: alpha(opacity=100);
  background-color: red;
}
.form-flat-radio i {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.form-flat-radio i:after {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  top: 4px;
  line-height: 1;
  width: 7px;
  position: absolute;
  background: #1e1e1e;
}
.form-flat-checkbox i:after {
  content: "\f00c";
  position: relative;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}
.form-flat-checkbox i:after {
  font-size: 12px;
  height: 17px;
  left: -1px;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin-top: 2px;
  width: 17px;
  opacity: 0;
  filter: alpha(opacity=0);
  line-height: 1;
}
<div class="form-flat-checkbox pull-left">
   <input type="checkbox" name="rememberme" id="rememberme" value="forever"><i></i>&nbsp;<label for="rememberme">Remember Me</label>
            </div>

Improve this answer

Comments

1

Wrap with label and link with ID 

.form-flat-radio,
.form-flat-checkbox {
  margin: 0;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 0 0 0 30px;
}
.dh-ie .form-flat-radio,
.dh-ie .form-flat-checkbox {
  padding: 0;
}
.form-flat-radio input,
.form-flat-checkbox input {
  left: -9999px;
  position: absolute;
}
.dh-ie .form-flat-radio input,
.dh-ie .form-flat-checkbox input {
  position: relative;
  left: auto;
}
.form-flat-radio i,
.form-flat-checkbox i {
  background: none repeat scroll 0 0 #fff;
  border-style: solid;
  border-width: 1px;
  display: block;
  height: 17px;
  left: 0;
  outline: medium none;
  position: absolute;
  top: 5px;
  border-color: #d5d5d5;
  width: 17px;
  top: 50%;
  margin-top: -8.5px;
  color: #1e1e1e;
}
.dh-ie .form-flat-radio i,
.dh-ie .form-flat-checkbox i {
  display: none;
}
.form-flat-radio i:after,
.form-flat-checkbox i:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}
.form-flat-radio input:checked + label i:after,
.form-flat-checkbox input:checked + label i:after {
  opacity: 1;
  filter: alpha(opacity=100);
  background-color: red;
}
.form-flat-radio i {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.form-flat-radio i:after {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  top: 4px;
  line-height: 1;
  width: 7px;
  position: absolute;
  background: #1e1e1e;
}
.form-flat-checkbox i:after {
  content: "\f00c";
  position: relative;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}
.form-flat-checkbox i:after {
  font-size: 12px;
  height: 17px;
  left: -1px;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin-top: 2px;
  width: 17px;
  opacity: 0;
  filter: alpha(opacity=0);
  line-height: 1;
}
<div class="form-flat-checkbox pull-left">
   <input type="checkbox" name="rememberme" id="rememberme" value="forever">
   <label for="rememberme"><i></i>&nbsp;Remember Me</label>
  </div>

Improve this answer

Comments

0

You don't need label tag just change this class properties:

.form-flat-radio input,
.form-flat-checkbox input {
    left: 0;
    position: absolute;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}


.form-flat-radio,
.form-flat-checkbox {
  margin: 0;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 0 0 0 30px;
}
.form-flat-radio input,
.form-flat-checkbox input {
    left: 0;
    position: absolute;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.form-flat-radio i,
.form-flat-checkbox i {
  background: none repeat scroll 0 0 #fff;
  border-style: solid;
  border-width: 1px;
  display: block;
  height: 17px;
  left: 0;
  outline: medium none;
  position: absolute;
  top: 5px;
  border-color: #d5d5d5;
  width: 17px;
  top: 50%;
  margin-top: -8.5px;
  color: #1e1e1e;
}
.form-flat-radio i:after,
.form-flat-checkbox i:after {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}
.form-flat-radio input:checked + i:after,
.form-flat-checkbox input:checked + i:after {
  opacity: 1;
  filter: alpha(opacity=100);
  background-color: red;
}
.form-flat-radio i {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.form-flat-radio i:after {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  top: 4px;
  line-height: 1;
  width: 7px;
  position: absolute;
  background: #1e1e1e;
}
.form-flat-checkbox i:after {
  content: "\f00c";
  position: relative;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}
.form-flat-checkbox i:after {
  font-size: 12px;
  height: 17px;
  left: -1px;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin-top: 2px;
  width: 17px;
  opacity: 0;
  filter: alpha(opacity=0);
  line-height: 1;
}
<div class="form-flat-checkbox pull-left">
   <input type="checkbox" name="rememberme" id="rememberme" value="forever">
   <i></i>&nbsp;Remember Me
</div>

Improve this answer

3 Comments

This places the checkbox behind the custom box but suffers the problem that it isn't exactly the same size. You can click the bottom of the custom box and not trigger the checkbox to toggle.
Can you provide an explanation with the code? It's unclear what you changed and why.
You can fix that problem without label tag, just change this class properties: .form-flat-radio input, .form-flat-checkbox input { left: 0; position: absolute; z-index: 1; opacity: 0; cursor: pointer; }

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.