it-swarm.com.ru

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

Я пытаюсь удвоить размер своих флажков на нескольких страницах. Как я могу сделать это в CSS? Я не хочу стилизовать парение.

Идеи?

22
codeChris

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

Я сделал быструю демонстрацию здесь , очевидно, вам нужно будет получить прозрачный .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>

10
Andy

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

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

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

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

Укладка флажков - рискованное дело. Это одна из тех вещей, которая никогда не работает согласованно со всеми браузерами.

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

 style="zoom:1.2"

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

9
Rahul Tripathi

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

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

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

5
Chloe

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

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

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

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

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

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

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

0
aldrien.h

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

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

Требуется jQuery и начальная загрузка 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"/>

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

0
DropHit

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

Поэтому я хотел бы избежать изменения, если это возможно.

0
Dominic Green