Kolejny raz jak zmienić rozmiar checkbox i radio - tylko HTML i CSS

0

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>&check;</b></span>checkbox 1
		</label><br>
		<label class="container">
			<input type="checkbox"><span class="control"><b>&check;</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

0

Ale w sumie to jakie jest pytanie? Bo dałeś informację o tym, że rozmiar czegoś da się zmienić oraz wrzuciłeś kod, który pokazuje, ze te elementy są powiększone. W czym jest problem? Czego od nas chcesz? ;)

1

Ale w sumie to jakie jest pytanie?
[...]
Opinii, czy takie rozwiązanie jest dobre, czy złe.

Ale w jakim sensie ma być dobre/złe? Czy robi to, czego oczekujesz? Czy wizualnie Ci się podoba? Możesz sprawdzić jeszcze na kilku róznych systemach/przeglądarkach, czy się zachowuje tak samo i zgodnie z Twoimi oczekiwaniami i tyle. To Ty masz być tym rozwiązaniem zadowolony, więc to raczej pytanie do Ciebie.

1

Nie do końca jest dobre w FF 77 na Linux Mint MATE (przesunięty środek):
Screenshot_2020-07-02 Edit fiddle - JSFiddle - Code Playground.png

0

Dziękuję. Właśnie o takie uwagi mi chodziło. Najbardziej zastanawia mnie, czy znaki unicode się wyświetlą w każdej przeglądarce.

1

Możesz użyć etykiety dla czekboksa i ostylować ją jak ci się podoba:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>tytul</title>
  <meta charset="UTF-8">

<style>
LABEL.pole {
  display:inline-block;
  border:1px solid #DADADA;  
  min-width:20px;
  width:25px;
  height:25px;
  padding:0px;
  margin:0px;
}

INPUT[type="checkbox"] {
  display:none;
  min-width:20px;
  width:25px;
  height:25px;  
}

INPUT[type="checkbox"]:checked + LABEL.pole {
  background-color:#84BC3D;
}

</style>
</head>
<body>

<input id="chce_fakture" class="pole" type="checkbox">
<label for="chce_fakture" class="pole">&nbsp;</label>
  
</body></html>
0

Po uwagach kolegów, wyświetlanie poniższego kodu nie powinno się rozjechać.

<!DOCTYPE html>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8">
		<title>...</title>
		<style>
			.control_field{
				font-size: 25px; /* Zmiana tej wartości powoduje zmianę rozmiaru checkbox i radio */
			}
			.control_field INPUT{
				display: none;
			}
			.control_box{
				width: 1em;
				height: 1em;
				margin: 0.3em;
				padding: 0;
				border: 0.1em solid #212121;
				display: inline-block;
				vertical-align: middle;
			}
			.checkbox_marker{
				display: block;
				width: 0.2em;
				height: 0.6em;
				margin-left: 0.30em;
				border: 0.1em solid rgba(0, 0, 0, 0);
				border-width: 0.1em;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			.radio_control_box{
				border-radius: 50%;
			}
			.radio_marker{
				display: block;
				width: 0.5em;
				height: 0.5em;
				margin-top: 0.25em;
				margin-left: 0.25em;
				background-color: rgba(0, 0, 0, 0);
				border-radius: 50%;
			}
			.control_field INPUT:checked ~ .control_box SPAN.radio_marker{
				background-color: #212121;
			}
			.control_field INPUT:checked ~ .control_box SPAN.checkbox_marker{
				border-right-color: #212121;
				border-bottom-color: #212121;
			}
			.control_field:hover INPUT ~ .control_box{
				border-color: #23abda;
			}
		</style>
	</head>
	<body>
		<label class="control_field" tabindex="0">
			<input type="checkbox"><span class="control_box"><span class="checkbox_marker"></span></span>c1<br>
		</label>
		<label class="control_field" tabindex="0">
			<input type="checkbox"><span class="control_box"><span class="checkbox_marker"></span></span>c2<br>
		</label>
		<label class="control_field" tabindex="0">
			<input type="radio" name="radio1"><span class="control_box radio_control_box"><span class="radio_marker"></span></span>r1<br>
		</label>
		<label class="control_field" tabindex="0">
			<input type="radio" name="radio1"><span class="control_box radio_control_box"><span class="radio_marker"></span></span>r2<br>
		</label>
	</body>
</html>

https://jsfiddle.net/9xbaLd1p/

0

Sugestia:
Wywal te <br> z wnętrza <label> bo ci się outline na zaznaczonych rozłazi na dwa wiersze.
Umieść je za <lable> albo w ogóle z nich zrezygnuj, ustawiając dla control_field display:block;

1

Dla innych takich jak ja, którzy nie mają umiejętności, aby samemu zrobić coś szybko, a potrzebują mieć to od ręki.

<!DOCTYPE html>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8">
		<title>...</title>
		<style>
			.control_field{
				font-size: 20px; /* Zmiana tej wartości powoduje zmianę rozmiaru checkbox i radio */
				cursor: pointer;
			}
			.control_field INPUT{
				position: absolute;
				margin: 0.9em;
				opacity: 0;
				z-index: -1;
			}
			.control_box{
				width: 1em;
				height: 1em;
				margin: 0.3em;
				padding: 0;
				border: 0.1em solid #212121;
				display: inline-block;
				vertical-align: middle;
				z-index: 5;
			}
			.checkbox_marker{
				display: block;
				width: 0.2em;
				height: 0.6em;
				margin-left: 0.30em;
				border: 0.1em solid rgba(0, 0, 0, 0);
				border-width: 0.1em;
				z-index: 5;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			.radio_control_box{
				border-radius: 50%;
			}
			.radio_marker{
				display: block;
				width: 0.5em;
				height: 0.5em;
				margin: 0 auto;
				margin-top: 0.25em;
				background-color: rgba(0, 0, 0, 0);
				border-radius: 50%;
				z-index: 5;
			}
			.control_field INPUT:checked ~ .control_box SPAN.radio_marker{
				background-color: #212121;
			}
			.control_field INPUT:checked ~ .control_box SPAN.checkbox_marker{
				border-right-color: #212121;
				border-bottom-color: #212121;
			}
			.control_field:hover INPUT ~ .control_box{
				border-color: #23abda;
			}
			.control_field INPUT:focus ~ .control_box{
				border-color: #23abda;
			}
		</style>
	</head>
	<body>
		<label class="control_field">
			<input type="checkbox"><span class="control_box"><span class="checkbox_marker"></span></span>c1
		</label><br>
		<label class="control_field">
			<input type="checkbox"><span class="control_box"><span class="checkbox_marker"></span></span>c2
		</label><br>
		<label class="control_field">
			<input type="radio" name="radio1"><span class="control_box radio_control_box"><span class="radio_marker"></span></span>r1
		</label><br>
		<label class="control_field">
			<input type="radio" name="radio1"><span class="control_box radio_control_box"><span class="radio_marker"></span></span>r2
		</label><br>
	</body>
</html>
0

Niestety takie rozwiazania maja to do siebie ze po jakims czasie sie dezaktualizuja.
A jesli dotycza podstawowych kontrolek to strona przestaje byc uzywalna.

1 użytkowników online, w tym zalogowanych: 0, gości: 1