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

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

6 82
html css checkbox

6 ответов:

в случае, если это может помочь кому-либо, вот простой 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" />
101

На самом деле есть способ сделать их больше, флажки так же, как и все остальное (даже 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 тоже.

28

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

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

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

вы можете изменить их, однако: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

2

вот трюк, который работает в самых последних браузерах (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;
});

изменить изменить #checkboxID стили

1

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

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

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

0