Home > Web Front-end > CSS Tutorial > Can CSS Style Radio Buttons to Look Like Checkboxes for Printing?

Can CSS Style Radio Buttons to Look Like Checkboxes for Printing?

Linda Hamilton
Release: 2024-12-15 00:10:10
Original
155 people have browsed it

Can CSS Style Radio Buttons to Look Like Checkboxes for Printing?

Styling Radio Buttons Like Checkboxes for Printing

Can radio buttons be styled to resemble checkboxes for print purposes, without resorting to more complex JavaScript-based solutions? The answer lies in utilizing the CSS3 appearance property.

Three years after this question's initial posting, this feat is now possible in modern browsers. By leveraging the appearance property, you can create radio elements that visually mimic checkboxes, as seen in the example below:

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

This solution offers a simple yet effective approach to ensuring that radio buttons display as checkboxes when printed, maintaining the illusion of an official form while simplifying development.

The above is the detailed content of Can CSS Style Radio Buttons to Look Like Checkboxes for Printing?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template