Создать CSS для увеличения флажков

Ответ 1

Вы всегда можете использовать checkbox hack, чтобы сделать свой собственный флажок. Это позволяет использовать гораздо более кросс-браузерное решение.

Я сделал быструю демонстрацию здесь, очевидно, вам нужно будет получить прозрачный .png тика, а не тот, который у меня есть.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}

<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

Ответ 2

Чтобы удвоить размер флажков, вы можете использовать свойство шкалы CSS. (2,2) означает в 2 раза ширину и в 2 раза большую высоту оригинала, но это будет довольно большим.

input[type="checkbox"] {
  transform:scale(2, 2);
}

Вы также можете использовать десятичные значения, только для небольших флажков.

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }

Ответ 3

Флажки стиля - это рискованный бизнес. Это одна из тех вещей, которые никогда не работают последовательно со всеми браузерами.

или вы можете попробовать

 style="zoom:1.2"

jQuery предлагает plugin сделать замену на флажках

Ответ 4

Я думаю, что лучшее, что вы можете сделать, это увеличить размер шрифта. Оттуда это зависит от того, как браузер обрабатывает его, если вы не делаете элемент макета div, который управляет скрытым флажком. Это не так сильно масштабируется.

input[type="checkbox"] {
  font-size: 50px;
}

Ответ 5

Это работает. Он использует относительные размеры, поэтому он масштабируется с вашим текущим размером шрифта.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

Возможно, вам придется корректировать свои поля.

Ответ 6

Styling - очень странный мир, который полностью перекрывает проблемы с браузером. http://www.456bereastreet.com/lab/form_controls/checkboxes/ Вы также можете создать свой собственный с помощью javascript, но это не очень удобно для пользовательской доступности.

Таким образом, я постараюсь избежать изменения, если это возможно.

Ответ 7

Я использовал эту библиотеку с sucess

http://plugins.krajee.com/checkbox-x

Для этого требуется jQuery и bootstrap 3.x

Загрузите zip здесь: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

Поместите содержимое zip в папку в вашем проекте

Вставьте нужные библиотеки в свой заголовок

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

Добавьте элементы управления данными к элементу с помощью параметра data-size = "xl", чтобы изменить размер, как показано здесь. http://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

Существует множество других функций, если вы просматриваете сайт плагина.

Ответ 8

Просто добавьте фоновое изображение к флажку. И отрегулируйте размеры по своему усмотрению.

Приведенный ниже код автоматически добавляет фон, когда он отмечен, и размер остается неизменным при статусе непроверенный.

Не нужно указывать как:

input[type=checkbox]:checked

или

input[type=checkbox]:checked ~ div label

Например, все флажки:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

Смотрите скрипт здесь.

Ответ 9

Или просто нарисуйте его высотой и шириной следующим образом:

<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">

PS. Я использовал это с бутстрапом и классом "checkbox-inline"