Флажки на веб-страницах - как их увеличить?

Ответ 1

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

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}

<input type="checkbox" />

Ответ 2

На самом деле есть способ сделать их больше, флажки, как и все остальное (даже iframe, как кнопка facebook).

Оберните их в увеличенный элемент:

.double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

Ответ 3

Попробуйте этот CSS

input[type=checkbox] {width:100px; height:100px;}

Ответ 4

Изменение размера флажка с помощью CSS приводит к непоследовательным результатам в браузерах и операционных системах. Вы не можете сделать это больше.

Однако вы можете их переустановить: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Ответ 5

Вот трюк, который работает в большинстве браузеров (IE9 +) как решение только для CSS, которое можно улучшить с помощью javascript для поддержки IE8 и ниже.

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

Настройте label тем, что вы хотите, чтобы этот флажок выглядел как

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

Для javascript вы сможете добавлять классы на ярлык, чтобы показать состояние. Кроме того, было бы разумно использовать следующую функцию:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

EDIT для изменения стилей #checkboxID

Ответ 6

Я использую приложение phonegap, а флажки меняются по размеру, выглядят и т.д. Поэтому я сделал свой собственный простой флажок:

Сначала код HTML:

<span role="checkbox"/>

Затем CSS:

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

Чтобы переключить состояние флажка, я использовал JQuery:

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

Но это легко можно сделать без него...

Надеюсь, это поможет!