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

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

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

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

— 21.11.2008 00:45

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

— 23.10.2018 18:45

Используйте этот простой ответ: stackoverflow.com/questions/57805394/…

— 05.09.2019 16:18

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

— 10.06.2020 22:03

html css

21.11.2008 00:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

495

4

652 540

16

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

21.11.2008 00:48

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

Источник

28.06.2010 16:55

Это немного некрасиво (из-за увеличения масштаба), но работает в большинстве новых браузеров:

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>

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

— 13.02.2013 19:34

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

— 05.03.2013 15:13

scale () нужно 2 параметра для хрома, FF и IE, я думаю. Поэтому, если вы просто измените все масштабы на масштаб (2,2), он должен работать в каждом браузере.

— 26.03.2013 18:44

scale () - идеальное решение для браузеров Android

— 10.05.2013 14:45

Входные данные выглядят очень размытыми в IE при увеличении масштаба даже с обоими параметрами. Кажется, не могу найти исправления для этого, даже с примененным свойством масштабирования.

— 30.10.2013 22:25

Отлично работает, за исключением тех случаев, когда я примеряю Macbook Pro с дисплеем Retina. У кого-нибудь еще есть эта проблема?

— 24.07.2014 16:33

Предупреждение: флажки IE невероятно пикселизированы. Chrome, по-видимому, использует SVG для флажка, и они могут масштабировать его до бесконечности.

— 05.11.2014 23:06

Все браузеры, кроме Safari и Android, больше не требуют префиксов.

— 10.04.2015 06:24

также добавьте transform: scale(2);, чтобы обеспечить больше возможностей для любого браузера

— 10.07.2015 18:43

Если вы по-прежнему не беспокоитесь об IE8, просто используйте scale(), как в ответе @Numbers (см. caniuse.com/#feat=transforms2d)

— 25.08.2015 20:48

idk, если это что-то, что хром недавно изменил, но использование шкалы делает их размытыми

— 25.09.2015 05:08

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

— 27.11.2015 01:37

В Safari нет визуальной разницы между scale(1.5) и scale(2) ... они отображаются одинаково ... например, 1.1, 1.2, 1.5 и т. д. Всегда округляются в большую сторону.

— 24.03.2016 22:27

масштабирование выглядит ужасно, на масштабе 2 вы уже видите отдельные пиксели. Я бы никогда не выбрал это решение для красивых больших флажков css.

— 16.01.2018 17:21

02.05.2012 17:58

Предварительный просмотр:
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>

@robertjd согласился, был сбит с толку, зачем это нужно для простого преобразования

— 09.04.2018 23:09

@robertjd Это даже не флажки; они переключаются.

— 30.05.2019 16:33

03.11.2012 19:30

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

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

<input type = "checkbox" />

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

— 08.01.2016 19:45

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

— 14.02.2018 13:43

Крайне не одобряет Mozilla. developer.mozilla.org/en-US/docs/Web/CSS/zoom

— 12.08.2019 01:34

Интересно, что Mozilla отговаривает это, в то время как Firefox - почти единственный браузер, который его не поддерживает: caniuse.com/#feat=css-zoom

— 20.05.2020 17:36

14.01.2014 17:37

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

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

font-size: x-large;

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

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

font-size, похоже, вообще не влияет на размер фактического флажка

— 11.05.2017 19:33

27.01.2014 21:14

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

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

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

Совместимость:

IE: 10+
FF: 16+
Хром: 36+
Safari: 9+
Опера: 23+
iOS Safari: 9.2+
Chrome для Android: 51+

Появление:

Chrome 58 (май 2017 г.), Windows 10

Подходит ли это для старых браузеров, например IE 8?

— 11.09.2014 20:07

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

— 18.02.2015 05:49

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

— 05.04.2016 11:29

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

— 14.02.2018 13:41

В Chrome 76 все еще пиксельные.

— 23.08.2019 18:12

Похоже, это больше не работает в Safari 13 на Mac OS Catalina .. может уменьшаться ниже 1, но не вверх и выше 1

— 18.02.2020 20:53

11.07.2014 04:59

В других ответах был отмечен пиксельный флажок, а мне хотелось чего-то красивого. Результат выглядит так: checkbox preview

Несмотря на то, что эта версия более сложная, я думаю, что стоит попробовать.

.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/

02.11.2016 15:16

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

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

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

Это просто убирает весь флажок. Затем вам нужно указать цвет фона, чтобы его увидеть. Но тогда как сделать так, чтобы галочка появилась? Это неполный ответ.

— 23.11.2020 04:07

27.04.2017 04:20

Версия 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>

Zoom вроде работает нормально на FQ. Может быть, не упустите старые версии Gecko?

— 09.04.2018 23:10

19.06.2017 11:48

Я только что сказал следующее:

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

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

— 19.10.2018 16:34

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

— 15.01.2019 01:11

Интересно, могут ли все эти правила CSS запутать некоторые функции доступности?

— 29.01.2021 22:00

24.10.2017 16:06

Я нашел эту библиотеку только для 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>

31.12.2017 03:12

вы можете изменить высоту и ширину в коде ниже

.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>

03.12.2018 10:23

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

Скриншоты:

Хром:

Firefox:

Лезвие:

Edge (устаревшая версия):

IE:

21.02.2019 13:16

Я думаю, что самое простое решение - изменить стиль флажка, как предлагают некоторые пользователи. Приведенный ниже 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, должно работать во всех современных браузерах. Просто измените свойства (цвета, размер, нижний, левый и т. д.) В соответствии с вашими потребностями. Надеюсь, это поможет!

14.07.2019 05:50

Моя репутация слишком низка, чтобы публиковать комментарии, но я внес изменения в приведенный выше код Джека Миллера, чтобы он не менял размер, когда вы устанавливаете и снимаете отметку. Это вызывало у меня проблемы с выравниванием текста.

    input[type=checkbox] {
        width: 17px;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 17px;
        border: 1px solid black;
    }

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

    input[type=checkbox]:checked:after {
        margin-left: 4px;
        margin-top: -1px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        display: inline-block;
    }
    input[type=checkbox]:after {
        margin-left: 4px;
        margin-top: -1px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 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>

29.01.2021 21:13

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

Ответы 16

Другие вопросы по теме

Похожие вопросы