CSS 스타일 라디오 버튼을 인쇄용 체크박스처럼 보이게 할 수 있나요?-CSS 튜토리얼-php.cn

CSS 스타일 라디오 버튼을 인쇄용 체크박스처럼 보이게 할 수 있나요?

Linda Hamilton

풀어 주다： 2024-12-15 00:10:10

원래의

155명이 탐색했습니다.

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

인쇄용 체크박스와 같은 라디오 버튼 스타일

복잡한 JavaScript를 사용하지 않고도 라디오 버튼을 인쇄용 체크박스와 비슷하게 스타일을 지정할 수 있습니까? 기반 솔루션? 대답은 CSS3 모양 속성을 활용하는 데 있습니다.

이 질문이 처음 게시된 지 3년이 지난 지금, 이 기능은 이제 최신 브라우저에서 가능합니다. 모양 속성을 활용하면 아래 예에서 볼 수 있듯이 체크박스를 시각적으로 모방하는 라디오 요소를 만들 수 있습니다.

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>

로그인 후 복사

이 솔루션은 라디오 버튼이 다음과 같이 표시되도록 하는 간단하면서도 효과적인 접근 방식을 제공합니다. 인쇄 시 확인란을 선택하여 공식 양식의 환상을 유지하면서 개발을 단순화합니다.

위 내용은 CSS 스타일 라디오 버튼을 인쇄용 체크박스처럼 보이게 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!