Can you style an html radio button to look like a checkbox?

by

Three years after this question is posted and this is almost within reach. In fact, it’s completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the CSS3 appearance property.

The result is radio elements that look like checkboxes:

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

jsfiddle: http://jsfiddle.net/mq8Zq/

Note: this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors. I’d recommend against implementing it unless you only need to support Webkit or Gecko based browsers.

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. Download the text over image using jquery
  3. How to autosize a textarea using Prototype?
  4. Is there a way to make text unselectable on an HTML page? [duplicate]
  5. How can I let a table’s body scroll but keep its head fixed in place?
  6. Can I force a link to open in a specific browser?
  7. Why write when the mime type is set by the server?
  8. How to make Internet Explorer emulate pointer-events:none?
  9. How to show popup message like in Stack Overflow
  10. Dropdown select with images
  11. flow 2 columns of text automatically with CSS
  12. Responsive horizontal page sliding
  13. Need to find height of hidden div on page (set to display:none)
  14. CSS delivery optimization: How to defer css loading?
  15. Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
  16. Scale element proportional to Background Cover with jQuery
  17. How to build simple tabs with jQuery?
  18. Bootstrap Dropdown with Hover
  19. What are some good ways to prevent people from copying my source code? [closed]
  20. Failed to load resource: the server responded with a status of 404 (Not Found)
  21. Images not loading when relative path is used in React
  22. how to get the base url in javascript
  23. Resize external website content to fit iFrame width
  24. How to show hidden divs on mouseover?
  25. Auto Mobile Site Redirect
  26. How to keep the header static, always on top while scrolling?
  27. Wrapping lists into columns
  28. HTML5 input required, scroll to input with fixed navbar on submit
  29. Possible to reverse a css animation on class removal?
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment