Могу ли я изменить размер флажка с помощью CSS?

459

Можно ли установить размер флажка с помощью CSS или HTML в разных браузерах?

widthи sizeработать в IE6 +, но не с Firefox, где флажок остается 16x16, даже если я установил меньший размер.

html css

— раж
источник

3

Это сложно сделать кросс-браузерным. Роджер Йоханссон исследовал это довольно широко.

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

Чтение всех комментариев - есть действительно простой способ сделать это без использования CSS: <input type = "checkbox" name = "checkboxName" value = "on" style = "width: 110%; height: 110%">

— Williamz902

Используйте этот простой

— ответ

@ Williamz902 style=тег это CSS ...

— Tiebe Groosman

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? вообще нет chrome?), устарел и содержит только ссылку и комментарий небольшого значения.

— nurettin

4

@jdw +1 за этот ответ, и даже мне нужно было это сделать, и ваш ответ был полезен. Но почему-то я нахожу, что «масштабированный» флажок выглядит немного искаженным. Я не знаю, так ли это с FF или моей ОС (Ubuntu 12.04). В любом случае, спасибо :)

— itols

1

шкале () нужны 2 параметра для хрома, 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+
Хром: 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 76.

— Лабрадор

68

Простое решение - использовать свойство zoom:

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

<input type="checkbox" />

Развернуть фрагмент

— Луиш
источник

8

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

— Гвенен

2

В Chrome 64 с macOS 10.13.3 это выглядит менее пиксельно, чем при использовании transform + scale

— Timo

Сильно обескуражен Мозиллой. developer.mozilla.org/en-US/docs/Web/CSS/zoom

— Trade-Ideas Филипп

Интересно, что 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
источник

Zoom выглядит так, как будто отлично работает на 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в качестве свойства для вашего ярлыка, чтобы сделать его фокусируемым.

— Sharcoux
источник

2

К сожалению, настройка display:noneввода не позволит выбрать его с помощью tabклавиши, поэтому я не думаю, что это хорошая идея.

— Harfangk

2

Хорошее замечание Вы можете добавить tabindex = 0 на входе, чтобы исправить это.

— Sharcoux

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, это можно исправить с помощью appearanceсвойства CSS . Это сделает флажки полностью пустыми, так что вы можете определить свой собственный внешний вид. Что в этом хорошего: вы можете использовать существующий 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>

Развернуть фрагмент

Скриншоты:

Хром:

Fire Fox:

Край:

IE:

— Джек миллер
источник

8

Я искал флажок, который был немного больше, и посмотрел на исходный код 37Signals Basecamp, чтобы найти следующее решение:

Вы можете изменить размер шрифта, чтобы сделать флажок немного больше:

font-size: x-large;

Затем вы можете правильно настроить флажок, выполнив:

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

— Джастин
источник

3

Размер шрифта, кажется, не влияет на размер фактического флажка вообще

— Майкл

Не работает для меня

— Амирхосейн Тармаст

6

Вы можете увеличить флажки в Safari - который обычно устойчив к обычным подходам - с этим атрибутом: -webkit-transform: scale(1.3, 1.3);

Источник

— Ави Лен
источник

6

Я думаю, что самое простое решение - изменить стиль флажка, как предлагают некоторые пользователи. CSS ниже работает для меня, требует только несколько строк CSS, и отвечает на вопрос OP:

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

Насколько я понимаю, это не так просто сделать кросс-браузер. Вместо того чтобы пытаться манипулировать элементом управления checkbox, вы всегда можете создать собственную реализацию, используя изображения, javascript и скрытые поля ввода. Я предполагаю, что это похоже на то, что есть niceforms (из ответа Staicu lonut выше), но не будет особенно трудным для реализации. Я считаю, что в jQuery есть плагин, позволяющий также настраивать это поведение (поищите ссылку и опубликуйте здесь, если я смогу ее найти).

— localshred
источник

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>

Развернуть фрагмент

— squarecandy
источник

3

Проблема в том, что Firefox не слушает ширину и высоту. Отключите это, и ваш хороший идти.

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

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

Развернуть фрагмент

— Worthy7
источник

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>

Развернуть фрагмент

— ручика васу
источник