Mnóstwo podobnych rozwiązań można znaleźć w internecie, ale żadne nie spełniło moich oczekiwań. W tym przypadku, żeby zmienić rozmiar elementów typu checkbox i radio wystarczy ustawić wysokość czcionki poprzez zmianę własności "font-size" klasy "container" w CSS. Rozmiar przedmiotowych elementów zmieni się proporcjonalnie do rozmiaru czcionki.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
font-size: 20px;
cursor: pointer;
}
.container input {
display: none;
}
.control {
display: inline-block;
border: 1px solid #212121;;
margin: 5px;
width: 1.5em;
height: 1.5em;
text-align: center;
vertical-align: middle;
color: rgba(0, 0, 0, 0);
user-select: none;
}
.radio_btn {
border-radius: 50%;
}
.container input:checked ~ .control {
color: #212121;
}
.container:hover input ~ .control{
background-color: #d8d8d8;
}
.container:hover input:checked ~ .control{
background-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body >
<label class="container">
<input type="checkbox"><span class="control"><b>✓</b></span>checkbox 1
</label><br>
<label class="container">
<input type="checkbox"><span class="control"><b>✓</b></span>checkbox 2
</label><br>
<label class="container">
<input type="radio" name="test"><span class="control radio_btn"><b>⬤</b></span>radio 1
</label><br>
<label class="container">
<input type="radio" name="test"><span class="control radio_btn"><b>⬤</b></span>radio 2
</label><br>
</body>
</html>
Przykład: https://jsfiddle.net/je0x467z/1