체크 박스처럼 보이도록 html 라디오 버튼의 스타일을 지정할 수 있습니까?

체크 박스처럼 보이도록 html 라디오 버튼의 스타일을 지정할 수 있습니까?

---

사용자가 작성하고 인쇄 할 html 양식이 있습니다. 인쇄 된 양식은 팩스 나 우편으로 정부 기관으로 보내지며, 정부 관료가 이것이 복제품이라는 사실을 알지 못하기 때문에 해당 기관에서 발행 한 원본 양식과 충분히 비슷해야합니다. 양식에 입력 한 데이터는 어디에도 저장되지 않으며 웹 서버로 다시 제출되지도 않습니다. 중요한 것은 사용자가 인트라넷 사이트에서 이러한 양식을 쉽게 찾고 일반 키보드로 인쇄 할 양식에 입력 할 수 있다는 것입니다.

화면에서 라디오 버튼을 그대로두고 라디오 버튼 사용을 시행하고 알리고 싶습니다 (하나의 옵션 만 선택). 그러나 인쇄 할 때 둥근 라디오 버튼 스타일이 아닌 사각형 확인란 스타일로 인쇄해야합니다. 미디어 선택기를 사용하여 인쇄 전용 스타일을 설정하는 방법을 알고 있으므로 문제가되지 않습니다. 내가 원하는대로 라디오 버튼의 스타일을 지정할 수 있는지 모르겠다는 것뿐입니다.

이 작업을 수행 할 수 없으면 각 라디오 버튼을 음영 처리하는 확인란을 만들고 javascript를 사용하여 확인란과 라디오 버튼을 동기화하고 CSS를 사용하여 적절한 매체에 관심있는 항목을 표시해야합니다. 분명히 스타일을 지정할 수 있다면 많은 작업을 절약 할 수 있습니다.

---

이 질문이 게시되고 3 년 후 거의 도달 할 수 있습니다. 사실, Firefox 1 이상, Chrome 1 이상, Safari 3 이상 및 Opera 15 이상에서는 다음을 사용하여 완전히 달성 할 수 있습니다.CSS3 appearance 특성.

결과는 체크 박스처럼 보이는 라디오 요소입니다.

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/

참고 : 이는 공급 업체의 지원 및 준수 부족으로 인해 결국 CSS3 사양에서 삭제되었습니다. Webkit 또는 Gecko 기반 브라우저 만 지원해야하는 경우가 아니라면 구현하지 않는 것이 좋습니다.

---

CSS3에서 :

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

실제로 :

<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>

@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}

그리고 <img>동기화 를 유지하려면 자바 스크립트 와 라디오 가 필요 합니다 (이상적으로는 처음에 삽입).

<img>브라우저는 일반적으로 인쇄하지 않도록 구성되어 있기 때문에 사용했습니다 background-image. 이미지는 대화 형이 아니고 문제를 일으킬 가능성이 적기 때문에 다른 컨트롤보다 이미지를 사용하는 것이 좋습니다.

---

이것은 CSS (Jsfiddle : http://jsfiddle.net/xykPT/ ) 만 사용하는 내 솔루션 입니다.

div.options > label > input {
	visibility: hidden;
}

div.options > label {
	display: block;
	margin: 0 0 0 -10px;
	padding: 0 0 20px 0;  
	height: 20px;
	width: 150px;
}

div.options > label > img {
	display: inline-block;
	padding: 0px;
	height:30px;
	width:30px;
	background: none;
}

div.options > label > input:checked +img {  
	background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
	background-repeat: no-repeat;
	background-position:center center;
	background-size:30px 30px;
}

<div class="options">
	<label title="item1">
		<input type="radio" name="foo" value="0" /> 
		Item 1
		<img />
	</label>
	<label title="item2">
		<input type="radio" name="foo" value="1" />
		Item 2
		<img />
	</label>   
	<label title="item3">
		<input type="radio" name="foo" value="2" />
		Item 3
		<img />
	</label>
</div>

---

아이콘에 멋진 글꼴 을 사용하도록 user2314737의 답변을 수정했습니다 . fa에 익숙하지 않은 사람들을 위해 img에 비해 한 가지 중요한 이점은 글꼴 고유의 벡터 기반 렌더링입니다. 즉, 어떤 줌 레벨에서도 이미지가 들쭉날쭉하지 않습니다.

jsFiddle

결과

div.checkRadioContainer > label > input {
	visibility: hidden;
}

div.checkRadioContainer {
	max-width: 10em;
}
div.checkRadioContainer > label {
	display: block;
	border: 2px solid grey;
	margin-bottom: -2px;
	cursor: pointer;
}

div.checkRadioContainer > label:hover {
	background-color: AliceBlue;
}

div.checkRadioContainer > label > span {
	display: inline-block;
	vertical-align: top;
	line-height: 2em;
}

div.checkRadioContainer > label > input + i {
	visibility: hidden;
	color: green;
	margin-left: -0.5em;
	margin-right: 0.2em;
}

div.checkRadioContainer > label > input:checked + i {
	visibility: visible;
}

<div class="checkRadioContainer">
	<label>
		<input type="radio" name="radioGroup" />
		<i class="fa fa-check fa-2x"></i>
		<span>Item 1</span>
	</label>
	<label>
		<input type="radio" name="radioGroup" />
		<i class="fa fa-check fa-2x"></i>
		<span>Item 2</span>
	</label>
	<label>
		<input type="radio" name="radioGroup" />
		<i class="fa fa-check fa-2x"></i>
		<span>Item 3</span>
	</label>
</div>

---

모든 브라우저에서 모양 속성이 작동하지 않습니다. 다음과 같이 할 수 있습니다.

input[type="radio"]{
  display: none;
}
label:before{
  content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
  content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}

 
  <input type="radio" name="gender" id="test1" value="male">
  <label for="test1"> check 1</label>
  <input type="radio" name="gender" value="female" id="test2">
  <label for="test2"> check 2</label>
  <input type="radio" name="gender" value="other" id="test3">
  <label for="test3"> check 3</label>  

IE 8+ 및 기타 브라우저에서 작동합니다.

---

CSS를 사용하는 컨트롤 이외의 다른 컨트롤처럼 보이게 만들 수는 없다고 생각합니다.

PRINT 버튼을 만드는 것이 가장 좋은 방법은 선택한 라디오 버튼 대신 그래픽이있는 새 페이지로 이동 한 다음 거기에서 window.print ()를 수행합니다.

---

예, CSS는 다음을 수행 할 수 있습니다.

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + *:before {
  content: "";
  display: inline-block;
  margin: 0 0.4em;
  /* Make some horizontal space. */
  width: .6em;
  height: .6em;
  border-radius: 0.6em;
  box-shadow: 0px 0px 0px .5px #888
  /* An outer circle. */
  ;
  /* No inner circle. */
  background-color: #ddd;
  /* Inner color. */
}
input[type=checkbox]:checked + *:before {
  box-shadow: 0px 0px 0px .5px #888
  /* An outer circle. */
  , inset 0px 0px 0px .14em #ddd;
  /* An inner circle with above inner color.*/
  background-color: #444;
  /* The dot color */
}

<div>
  <input id="check1" type="checkbox" name="check" value="check1" checked>
  <label for="check1">Fake Checkbox1</label>
</div>
<div>
  <input id="check2" type="checkbox" name="check" value="check2">
  <label for="check2">Fake Checkbox2</label>
</div>
<div>
  <input id="check2" type="radio" name="check" value="radio1" checked>
  <label for="check2">Real Checkbox1</label>
</div>
<div>
  <input id="check2" type="radio" name="check" value="radio2">
  <label for="check2">Real Checkbox2</label>
</div>

---

Javascript없이 테이블을 사용하는 매우 간단한 아이디어. 내가 너무 단순합니까?

<style type="text/css" media="screen">
#ageBox {display: none;}
</style>

<style type="text/css" media="print">
#ageButton {display: none;}
</style>

<tr><td>Age:</td>

<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34

<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34

</td></tr>

참조 URL : https://stackoverflow.com/questions/279421/can-you-style-an-html-radio-button-to-look-like-a-checkbox