Чи можна змінити розмір прапорця за допомогою CSS?

458

Чи можна встановити розмір прапорця за допомогою CSS або HTML у веб-переглядачах?

widthі sizeпрацюйте в IE6 +, але не з Firefox, де прапорець залишається 16x16, навіть якщо я встановив менший розмір.

html css

— РІЗНИЙ
джерело

3

Крос-браузер це важко зробити. Роджер Йохансон досліджував це досить широко.

— Крістіан Лібардо

Читаючи всі коментарі - є дійсно простий спосіб зробити це без залучення CSS: <input type = "checkbox" name = "checkboxName" value = "on" style = "width: 110%; висота: 110%">

— Williamz902

Скористайтеся цим простим ans: stackoverflow.com/questions/57805394/…

— Pritesh

434

Це трохи некрасиво (через масштабування), але працює у більшості нових браузерів:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

Розгорніть фрагмент

— jdw
джерело

3

це здається правильною відповіддю, оскільки одна з позначених як відповідь не пропонує рішення у багатьох випадках (немає рішення для firefox на xp? взагалі немає хрому?), застаріла і містить лише посилання та коментар, що не має великого значення.

— Нуреттін

4

@jdw +1 за цю відповідь, і навіть у мене була потреба це зробити, і ваша відповідь була корисною. Але я якось вважаю, що прапорець "масштабний" видається дещо спотвореним. Я не знаю, чи це справа з FF або моєю ОС (Ubuntu 12.04). Все одно дякую :)

— itsols

1

Шкала () потребує 2 параметрів для chrome, FF та IE Я думаю. Тож якщо ви просто поміняєте всі масштаби на масштаб (2,2), він повинен працювати у кожному браузері.

— Онур Топал

10

також додайте transform: scale(2);, щоб забезпечити більше для будь-якого браузера

— Adriano Resende

8

масштабування виглядає приголомшливо, у масштабі 2 ви вже бачите окремі пікселі. Я б ніколи не вибирав це рішення для красивих великих прапорців css.

— basZero

369

Робоче рішення для всіх сучасних браузерів.

input[type=checkbox] {
    transform: scale(1.5);
}

<label><input type="checkbox"> Test</label>

Розгорніть фрагмент

Сумісність:

IE: 10+
FF: 16+
Chrome: 36+
Сафарі: 9+
Опера: 23+
iOS Safari: 9.2+
Chrome для Android: 51+

Зовнішній вигляд:

Chrome 58 (травень 2017 р.), Windows 10

— Незнайомець
джерело

Чи охоплює це старі браузери, наприклад 8?

— Хуанізм

1

@Huangism Ні, наведений вище код не матиме жодного ефекту в IE 8, який не підтримує transformвластивість. Підтримка IE 9, -ms-transformяку ви можете використовувати, проте деякі кажуть, що вона досить пікселізована, тому, можливо, краще залишити IE 9 за замовчуванням.

— Саймон Схід

Чи не вище підхід поганий, тому що існує межа шкали, оскільки це призводить до того, що прапорець буде пікселізовано.

— rishiAgar

9

Надзвичайно піксельний на Chrome 64 із macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg

— Тимо

Ще пікселізовано на Chrome 76.

— Лабрадор

68

Простим рішенням є використання властивості zoom:

input[type="checkbox"] {
    zoom: 1.5;
}

<input type="checkbox" />

Розгорніть фрагмент

— Луїз
джерело

8

Не впевнений, що він працює у всіх браузерах, але на екрані він виглядає красивіше, ніж рішення про трансформацію масштабу.

— Gwened

2

У Chrome 64 з macOS 10.13.3 це виглядає менш піксельно, ніж використання трансформації + шкала

— Тимо

Мозіла сильно відлякує. developer.mozilla.org/en-US/docs/Web/CSS/zoom

— Trade-Ideas Philip

Це цікаве , що Mozilla бентежить його в той час як Firefox є майже єдиним браузером , який не підтримує його: caniuse.com/#feat=css-zoom

— ndreisg

47

Версія 2020 - використовуючи псевдоелементи, розмір залежить від розміру шрифту.

Поле за замовчуванням / радіо відображається поза екраном, але CSS створює віртуальні елементи, дуже схожі на елементи за замовчуванням. Підтримується всі браузери, не розмивається. Розмір залежить від розміру шрифту. Дії клавіатури (пробіл, вкладки) також підтримуються.

https://jsfiddle.net/ohf7nmzy/2/

body{
	padding:0 20px;
}
.big{
	font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
	position: relative;
	line-height: 1.4;
}
/* radio */
input[type=radio]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=radio] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 50%;
	background-color: #bbbbbb;
}
input[type=radio] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
	border: 0.2em solid #8eb9fb;
	margin-top: -0.2em;
	margin-left: -0.2em;
	box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 10%;
	background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 10%;
	transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
	position: absolute;
	content: "\2713";
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
	border-radius: 10%;
	color: white;
	text-align: center;
	line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
	border: 0.1em solid #8eb9fb;
	margin-top: -0.1em;
	margin-left: -0.1em;
	box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
	<input type="checkbox" name="checkbox_3" id="gg" checked /> 
	<label for="gg">Checkbox big</label>

	<br />

	<input type="checkbox" name="checkbox_4" id="hh" /> 
	<label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
	<input type="radio" name="radio_2" id="cc" value="1" checked /> 
	<label for="cc">Radio big</label>

	<br />

	<input type="radio" name="radio_2" id="dd" value="2" /> 
	<label for="dd">Radio big</label>
</div>

Розгорніть фрагмент

Версія 2017 року - за допомогою масштабування або масштабу

Браузер використовуватиме нестандартну zoomфункцію, якщо вона підтримується (приємна якість) або стандартна transform: scale(розмита).

Масштабування працює у всіх браузерах, але воно буде розмитим на Firefox та Safari .

https://jsfiddle.net/ksvx2txb/11/

@supports (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
	zoom: 2;
	}
}
@supports not (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		transform: scale(2);
		margin: 15px;
	}
}
label{
  /* fix vertical align issues */
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>

Розгорніть фрагмент

— ViliusL
джерело

Масштаб виглядає так, що він добре працює на FQ. Можливо, стежте за старішими версіями Gecko?

— Ніл Чоуддурі

27

Я щойно вийшов з цим:

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

Розгорніть фрагмент

Звичайно, завдяки цьому ви можете змінити значення content своїх потреб і використовувати зображення, якщо бажаєте, або використовувати інший шрифт ...

Основний інтерес тут полягає в тому, що:

Розмір прапорця залишається пропорційним розміру тексту
Ви можете керувати аспектом, кольором, розміром прапорця
Не потрібен додатковий HTML!
Потрібні лише 3 рядки CSS (останній - лише для того, щоб дати вам ідеї)

Редагувати : Як зазначено в коментарі, прапорець не буде доступний за допомогою клавіш навігації. Напевно, ви повинні додати tabindex=0свою властивість як мітку, щоб зробити її орієнтованою.

— Шарку
джерело

2

На жаль, встановлення display:noneна вході не дозволить вибрати його tabклавішею, тому я не думаю, що це гарна ідея.

— Harfangk

2

Гарне зауваження. Ви можете додати tabindex = 0 на вхід, щоб виправити це.

— Шарку

26

Попередній перегляд:
http://jsfiddle.net/h4qka9td/

*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 3 */

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #a5a39d;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}

.switch.demo3 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch.demo3 label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow:
      0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}

.switch.demo3 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: "off";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: "on";
  right: 115%;
  color: #82a06a;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}

<div class="switch demo3">
  <input type="checkbox">
  <label><i></i>
  </label>
</div>

<div class="switch demo3">
  <input type="checkbox" checked>
  <label><i></i>
  </label>
</div>

Розгорніть фрагмент

— UniMe
джерело

@robertjd погодився, розгубився, чому це потрібно для простого перетворення

— Ніл Чоуддурі

@robertjd Це навіть не прапорці; вони перемикачі.

— TylerH

14

Здається, поява прапорців за замовчуванням встановлено. Але як зазначає Worthy7, це можна виправити за допомогою властивості CSSappearance . Це зробить прапорці абсолютно порожніми, тож ви зможете визначити власну зовнішність. Що приємно в цьому: Ви можете використовувати свій існуючий HTML-код. Далі: це експериментальна технологія . Edge та IE не використовують користувацький стиль.

Ось необхідні стилі CSS:

input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}

<label><input type="checkbox"> Test</label>

Розгорніть фрагмент

Скріншоти:

Chrome:

Firefox:

Край:

IE:

— Джек Міллер
джерело

8

Я хотів зробити прапорець, який був трохи більшим, і переглянув вихідний код для 37Signals Basecamp, щоб знайти таке рішення -

Ви можете змінити розмір шрифту, щоб зробити прапорець трохи більшим:

font-size: x-large;

Потім ви можете правильно вирівняти прапорець, виконавши:

vertical-align: top;
margin-top: 3px; /* change to center it */

— Джастін
джерело

3

розмір шрифту, схоже, зовсім не впливає на розмір фактичного прапорця

— Майкл

Не працював для мене

— Amirhossein Tarmast

6

Ви можете збільшити прапорці в Safari, які, як правило, стійкі до звичайних підходів, за допомогою цього атрибута: -webkit-transform: scale(1.3, 1.3);

Джерело

— Аві льон
джерело

6

Я думаю, що найпростішим рішенням є перевстановити прапорець, як пропонують деякі користувачі. Наведений нижче CSS працює для мене, вимагає лише декількох рядків CSS та відповідає на питання ОП:

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "\2713"; /* check mark */
}

Як уже згадувалося в цій публікації, здається, що властивість збільшення не працює на Firefox, і перетворення можуть спричинити небажані ефекти.

Тестований на Chrome і Firefox, повинен працювати у всіх сучасних браузерах. Просто змініть властивості (кольори, розмір, низ, ліворуч тощо) на свої потреби. Сподіваюся, це допомагає!

— JCdotNET
джерело

5

Я розумію, що зробити це крос-браузером зовсім непросто. Замість того, щоб намагатися маніпулювати елементом керування, ви завжди можете створити власну реалізацію, використовуючи зображення, javascript та приховані поля введення. Я припускаю, що це схоже на те, що є приємними формами (з відповіді Стайку Лонут вище), але це було б не особливо складно втілити. Я вважаю, що у jQuery є плагін, який також дозволяє використовувати цю власну поведінку (шукаю посилання та публікуйте тут, якщо я можу його знайти).

— місцевірешти
джерело

3

Мені ця бібліотека, що підтримує лише CSS, дуже корисна: https://lokesh-coder.github.io/pretty-checkbox/

Або ви можете розгорнути своє власне за допомогою цього самого базового поняття, подібного до того, яке розмістив @Sharcoux. Це в основному:

Приховати звичайний прапорець (непрозорість 0 та розмістити його, куди воно піде)
Додайте підроблений прапорець на основі css
Використовуйте input:checked~div labelдля перевіреного стилю
переконайтеся, що користувач <label>може натискатиfor=yourinputID

.pretty {
  position: relative;
  margin: 1em;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty-inner {
  box-sizing: border-box;
  position: relative;
}
.pretty-inner label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
  content: '';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.pretty-inner label:before {
  border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
  background-color: #00bb82;
  width: calc(1em - 6px);
  height: calc(1em - 6px);
  top: 4px;
  left: 4px;
}


/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
  content: '\2713';
  color: #fff;
  position: absolute;
  font-size: 0.65em;
  left: 6px;
  top: 3px;
}



body {
  font-size: 20px;
  font-family: sans-serif;
}

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner"><label for="demo">I agree.</label></div>
</div>

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div>
</div>

Розгорніть фрагмент

— квадратна
джерело

3

Проблема в тому, що Firefox не слухає ширину та висоту. Вимкніть це і ваше добро.

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}

<label><input type="checkbox"> Test</label>

Розгорніть фрагмент

— Достойний7
джерело

3

Інші відповіді показали пікселізований прапорець, тоді як я хотів чогось прекрасного. Результат виглядає приблизно так:

Хоча ця версія є складнішою, я думаю, що варто спробувати.

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item:last-of-type {
  border-bottom: 0;
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;
}
.checkbox-list__check:before {
  position: absolute;
  display: block;
  width: 18px;
  height: 22px;
  top: -2px;
  left: 0px;
  padding-left: 2px;
  background-color: transparent;
  transition: background-color .3s ease;
  content: '\2713';
  font-family: initial;
  font-size: 19px;
  color: white;
}

input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
  background-color: #5bc0de;
}

<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;">
  <div class="checkbox-list__check"></div>
</label>

Розгорніть фрагмент

JSFiddle: https://jsfiddle.net/asbd4hpr/

— hcarreras
джерело

0

ви можете змінити висоту та ширину в наведеному нижче коді

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;
}

<div class="check">

     <label class="container1">Architecture/Landscape
										  

    <input type="checkbox" checked="checked">
										  

    <span class="checkmark"></span>
								 

	</label>
</div>

Розгорніть фрагмент

— ruchika vasu
джерело