Input type checkbox not working, chrome displays default

Question

the input type checkbox just wont work, chrome displays the default checkboxes while my other css cases work and display how they should.

.checkbox{
border: 2px solid white !important;
background:#121f20 !important;
color:white !important;
font-family: open sans !important;
font-weight: 900 !important;
font-size: 15px !important;
padding:5px !important;    
}

html

<table class="tableEnd">
  <tr>
    <td class="emptyTd"> 

      <input type="checkbox"  class="checkbox" name="checkbox" value="checkbox" /> I certify that I have read and agreed to the General Terms and Agreement <br>
      <input type="checkbox" class="checkbox" name="option" value="Check" > I certify that I have read and agreed to the Acceptable Use Policy       <br>

      <input type="checkbox" class="checkbox" name="option" value="Check"> I commission  to provision services immediately. Distance selling regulations do not apply<br></td>

  </tr> 
</table>

<table class="tableEnd">
  <tr> 
    <td class="coupon">Coupon <input type="text" name="coupon" value="code"> <input class="button" type="submit" value="Submit"></td>               
    <td class="payment" ><input class="button" type="submit" value="Order"></td>
  </tr>

</table>

Checkboxes aren't easy to style, take a look at this answer http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css — RobinvdA, Aug 26 '14 at 09:26
@MelanciaUK you'd use `input[type="checkbox"] { }`, not `checkbox { }`. — James Donnelly, Aug 26 '14 at 09:26
Besides, `font-family, font-weight, font-size` properties have no effect on checkboxes. — Hashem Qolami, Aug 26 '14 at 09:26
hi guys, i just did that, but its still not working as it should? — redfirm, Aug 26 '14 at 09:26
@HashemQolami good spot. Removed my comment. The OP added the classes anyway. — emerson.marini, Aug 26 '14 at 09:27

score 1 · Answer 1 · answered Aug 26 '14 at 09:29

1

Checkbox does not support border and padding, thats why we use customize checkboxes useing javascript/jquery plugins.

There are lots of plugins available e.g. http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/

answered Aug 26 '14 at 09:29

Abdulla khan

758
5
11

score 0 · Accepted Answer · edited May 23 '17 at 12:21

If you're wanting to style the text beside the checkbox you should wrap it in a label alongside your checkbox:

<label>
    <input type="checkbox"  class="checkbox" name="checkbox" value="checkbox" />
    I certify that I have read and agreed to the General Terms and Agreement
</label>

Note how I've also removed the br element.

You can then apply the styling to the label element itself:

label {
    border: 2px solid white;
    background:#121f20;
    color:white;
    display: block; /* Achieves the same effect of the now-removed br element. */
    font-family: open sans;
    font-weight: 900;
    font-size: 15px;
    padding:5px; 
}

If you're wanting to style the actual checkbox then you'll need to do some research into how to best achieve this, as most browsers do not apply any CSS to checkbox inputs. See: How to style checkbox using CSS?

score 0 · Answer 3 · answered Aug 26 '14 at 09:28

None of the properties you are changing have any effect on checkboxes in Chrome.

They have no text, so font-family, font-weight and font-size are nonsense.

Some browsers (although I don't recall seeing one in a long time) support styling the border, background, color and padding of checkboxes, but Chrome does not.

People wanting to style them usually use hack involving hiding the checkbox itself and changing the appearance of the associated <label> element.

Input type checkbox not working, chrome displays default

3 Answers3