Можете ли вы установить html-переключатель, чтобы он выглядел как флажок?

Question

У меня есть HTML-форма, которую пользователь заполнит и распечатает. После того, как эти формы будут напечатаны, они будут отправлены по факсу или по почте правительственному агентству, и должны выглядеть достаточно близко к оригинальной форме, опубликованной указанным агентством, чтобы правительственный чиновник не заметил, что это репродукция. Данные, введенные в форму, нигде не сохраняются и даже не отправляются обратно на веб-сервер. Все, что имеет значение, - это то, что наши пользователи могут легко найти эти формы на нашем сайте в интрасети и ввести форму для печати с помощью обычной клавиатуры.

На экране я хочу оставить переключатель как есть, чтобы принудительно устанавливать и сообщать использование переключателя (выберите только один вариант). Однако, когда он распечатывается, мне нужно, чтобы он печатался с квадратным стилем флажка, а не с круглым стилем переключателя. Я знаю, как использовать селектор медиа для установки стилей только для печати, так что это не проблема. Просто я не знаю, смогу ли я оформить радио-кнопку так, как хочу.

Если я не могу заставить это работать, мне нужно будет создать флажок, чтобы скрыть каждую радио-кнопку, использовать javascript, чтобы синхронизировать флажки и радио-кнопки, и css, чтобы показать тот, который мне нужен, в правильном Средняя. Очевидно, что если бы я мог просто стилизовать их, это сэкономило бы много работы.

Answer 1

Через три года после того, как этот вопрос опубликован, это почти в пределах досягаемости. Фактически, это полностью достижимо в 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.

Answer 2

В 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;}}

, и вам понадобится Javascript для синхронизации <img> и радиостанций (и, в идеале, сначала вставьте их туда).

Я использовал <img>, потому что браузеры обычно настроены не печатать background-image. Лучше использовать изображение, чем другой элемент управления, потому что изображение не является интерактивным и с меньшей вероятностью вызывает проблемы.

Answer 3

Это мое решение с использованием только 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>

Answer 4

Я подправил ответ пользователя user2314737, чтобы использовать шрифт awesome для значка. Для тех, кто не знаком с 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>

Answer 5

внешний вид свойство не работает во всех браузерах. Вы можете сделать как следующее-

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+ и другие браузеры

Answer 6

Да, 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>

Answer 7

Очень простая идея с использованием таблицы и без 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>

Answer 8

Не думаю, что вы можете сделать элемент управления похожим на что-либо, кроме элемента управления с помощью CSS.

Лучше всего сделать так, чтобы кнопка PRINT шла на новую страницу с графикой вместо выбранной радиокнопки, а затем выполните там window.print ().