Custom Checkbox

by

There is a CSS trick that actually works by hiding the checkbox (or radio), defining a label (which in all relevant browsers will turn the checkbox on/off) that will be the visual representation, and using the :checked and + selectors.

This is just a simple example:

.foscheck input { display: none; }
.foscheck label { display: block; width: 20px; height: 20px; background: red; }
.foscheck input:checked + label { background: blue; }
<div class="foscheck">
  <input type="checkbox" id="fos1" />
  <label for="fos1"></label>
</div>

jsFiddle Demo

Downsides: the :checked selector unfortunately does not work on IE, only from IE9. You can apply a Javascript fallback only for IE through conditional comments though.

Note: For accessibility, you should have some text describing the checkbox in the label, I just wanted to illustrate the effect.

More Related Contents:

  1. How to ensure a form field is submitted when it is disabled?
  2. Possible to associate label with checkbox without using “for=id”?
  3. How to make a submit button display as a link?
  4. Disable scrolling on “
  5. How to add a black shadow on top of a div block with background image?
  6. Get the longest text in HTML document using Jquery or javascript
  7. html form that passes information to a variable in javascript [closed]
  8. How do you read CSS rule values with JavaScript?
  9. JavaScript Form Submit – Confirm or Cancel Submission Dialog Box
  10. How to submit an HTML form without redirection
  11. jQuery: Get selected element tag name
  12. How to get number of rows in using JavaScript?
  13. Shrink DIV to text that’s wrapped to its max-width?
  14. How to ONLY trigger parent click event when a child is clicked
  15. Positioning divs in a circle using JavaScript
  16. Why scripts at the end of body tag
  17. How can I detect when a new element has been added to the document in jquery?
  18. JavaScript Loading Screen while page loads
  19. Materialize CSS – Select Doesn’t Seem to Render
  20. How to Toggle a div’s visibility by using a button click
  21. Change text color based on brightness of the covered background area?
  22. jQuery – Sticky header that shrinks when scrolling down
  23. Show text letter by letter
  24. How do I make an “else” in an IE HTML conditional?
  25. jQuery: Change element type from hidden to input
  26. How do I hide the address bar on iPhone?
  27. Why isn’t my checkbox change event triggered?
  28. Change style header/nav with Intersection Observer (IO)
  29. Split text into pages and present separately (HTML5)
  30. Can you have multiple lines in an element?

Leave a Comment