Большие флажки, которые работают кросс-браузер?

Question

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

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

Также многие вопросы по этой теме устарели.

У кого-нибудь есть этот успех?

Спасибо

Answer 1

Это самый простой способ настроить флажок только с помощью CSS.

label {
	display:inline-block;
	width:30px;
	height:30px;
	border:1px solid #000;
}

div {
	position:relative;
}

input:checked + label {
	background:red;
}

input {
	opacity:0;
	position:absolute;
}

<div>
	<input id=chk type="checkbox">
	<label for="chk"></label>
</div>