Флажки на веб-страницах - как сделать их больше?

Question

Стандартные флажки, отображаемые в большинстве браузеров, довольно малы и не увеличиваются в размере даже при использовании более крупного шрифта.Каков лучший, независимый от браузера способ отображения больших флажков?

Answer 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" />

Answer 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;
  -webkit-transform-origin: 0 0;
}

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

Это может выглядеть немного "перемасштабированным", но это работает.

Конечно, вы можете сделать этот div float: left и поставить свой ярлык рядом с ним, float: left тоже.

Answer 3

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

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

Answer 4

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

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

Стиль label с тем, что вы хотитефлажок должен выглядеть так:

#checkboxID
{
  position: <del>absolute</del> 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;
});

РЕДАКТИРОВАТЬ для изменения #checkboxID стилей

Answer 5

Я пишу приложение 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');
    });
}

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

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