Как оформить флажок с помощью CSS?

Question

Как оформить флажок с помощью CSS?

739

Я пытаюсь оформить флажок с помощью следующего:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Но стиль не применяется. Флажок по-прежнему отображает стиль по умолчанию. Как мне придать ему указанный стиль?

svirk 10 нояб. 2010, в 20:01

Источник

4

stackoverflow.com/questions/2460501/...
Purefan 18 июнь 2012, в 14:27
1

я думаю, что вы ищете что-то вроде этого: asimishaq.com/myfiles/image-checkbox Смотрите это сообщение: stackoverflow.com/questions/16352864/…
asim-ishaq 03 май 2013, в 12:11
1

cssdeck.com/labs/css-checkbox-styles
Sohail xIN3N 15 апр. 2014, в 11:34
0

Я написал учебник о том, как настраивать флажки и радио только с помощью CSS, а также создавать переключатели вкл / выкл. Проверьте это!
Felix Hagspiel 03 янв. 2015, в 19:59
0

Где ваш учебник @FelixHagspiel
Shahadat Atom 12 авг. 2016, в 11:59
1

ссылка в комментарии выше. в любом случае: blog.felixhagspiel.de/index.php/posts/custom-inputs
Felix Hagspiel 12 авг. 2016, в 13:30
0

Вот это да. Глядя на все эти ответы, я просто должен сказать: « Вся эта работа только для того, чтобы поставить на экран стильный флажок».
Michael 04 фев. 2018, в 21:18

Показать ещё 5 комментариев

Теги:

html

css

checkbox

27 ответов

129

Есть способ сделать это, используя только CSS. Мы можем (ab) использовать элемент label и стиль, который вместо этого. Предостережение заключается в том, что это не будет работать для IE8 и более низких версий.

CSS:

.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    position: relative;
    z-index: -9999;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
}

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

HTML:

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

Blake Pettersson 30 авг. 2012, в 10:13

0

@ Блейк Петтерссон будет работать в IE 8+?
Gandalf StormCrow 05 окт. 2012, в 01:14
0

@GandalfStormCrow это будет работать для любого браузера, который поддерживает псевдокласс: checked, который IE8 НЕ поддерживает. Вы можете проверить, работает ли это с selectivizr.com - который добавляет поддержку: selected и friends.
Blake Pettersson 05 окт. 2012, в 12:08
0

Другими словами, IE9 и более поздние версии поддерживают: проверено.
Blake Pettersson 08 окт. 2012, в 13:13
1

Существует полифилл для IE8 и ниже: github.com/rdebeasi/checked-polyfill
Tim 02 янв. 2014, в 19:49
0

@Tim Ссылка ployfill, которой вы поделились, не работает
SharpCoder 19 сен. 2014, в 08:25
0

Это работает, но впервые мерцает. Почему это происходит?
technophyle 04 март 2016, в 02:26
0

Я считаю, что скрытый input никогда не фокусируется на клавиатуре, поэтому он недоступен для клавиатуры.
sam 04 март 2016, в 17:27
0

Обновлен пример использования position: relative и отрицательный z-index .
Blake Pettersson 01 июнь 2016, в 01:32
0

Превосходная работа, работал как шарм с несколькими модами для моего дизайна. Спасибо!
SlickRemix 02 май 2017, в 21:41

Показать ещё 7 комментариев

128

Вы можете добиться довольно крутого пользовательского эффекта флажка, используя новые возможности, которые идут с псевдо-классами :after и :before. Преимущество этого заключается в следующем: вам не нужно ничего добавлять в DOM, только стандартный флажок.

Обратите внимание, что это будет работать только для совместимых браузеров, я считаю, что это связано с тем, что некоторые браузеры не позволяют устанавливать :after и :before для элементов ввода. К сожалению, это означает, что на данный момент поддерживаются только браузеры webkit. FF + IE по-прежнему будет позволять функционировать флажкам, просто не установленным, и, надеюсь, это изменится в будущем (код не использует префиксы поставщиков).

Это только решение для браузера Webkit (Chrome, Safari, мобильные браузеры)

Смотрите пример Fiddle

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Бонусная скрипка Flipwitch в стиле Webkit

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>

Josh Mc 09 июнь 2013, в 01:49

7

Firefox 33.1 / Linux: скрипка показывает только флажки по умолчанию. Ничто не выглядит иначе.
robsch 27 нояб. 2014, в 07:33
1

@robsch Это четко указано в оригинальном сообщении. Версия Firefox или ОС не имеет значения, она не работает в Firefox. «FF + IE по-прежнему будет позволять работать флажкам, просто не стилизованным ...»
Josh Mc 04 янв. 2015, в 22:25
0

Хороший подход. Но не все браузеры делают это хорошо. Насколько я знаю, только Chrome имеет лучший результат.
E-A 09 июнь 2015, в 12:56
0

Очень хорошо. Однако ... Это снова подход IE 5.x. Только Webkit. Потому что это не всегда следует правилам ... В этом и заключается вся проблема браузеров webkit.
Alex Hakkenberg 23 март 2016, в 11:17
1

Лучшее решение! +1 Но я не вижу смысла писать такой большой пример. 30 строк для описания идеи будет достаточно.
Andrii Bogachenko 15 фев. 2017, в 12:46
0

Я получаю флажки по умолчанию в Firefox 58 и IE11 на Win тоже.
Dan 12 фев. 2018, в 11:31
0

@AndriiBogachenko Напротив, наличие подробного примера отлично подходит для качественного ответа.
Félix Gagnon-Grenier 18 янв. 2019, в 19:20

Показать ещё 5 комментариев

119

Прежде чем начать (по состоянию на январь 2015 года)

Первоначальному вопросу и ответу сейчас ~ 5 лет. Таким образом, это немного обновление.

Во-первых, существует множество подходов, когда дело доходит до стилизации флажков. Основной принцип:

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

Решение (в принципе)

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

Оберните ваш флажок в элемент label. Это будет означать, что даже когда он скрыт, вы все равно можете переключать его проверенное состояние, щелкая в любом месте метки.
Скрыть свой флажок
Добавьте новый элемент после флажка, который вы будете соответствующим образом стилизовать. Он должен появиться после флажка, чтобы его можно было выбрать с помощью CSS и стилизовать в зависимости от состояния :checked. CSS не может выбрать "назад".

Решение (в коде)

label input {
  visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow tabbing, which display:none prevents */
  display:block;
  height:0;
  width:0;
  position:absolute;
  overflow:hidden;
}
label span {/* <-- style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- style its checked state */
  background: black;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Уточнение (с помощью значков)

Но эй! Я слышу, как ты кричишь. А что, если я хочу показать симпатичную галочку или крестик в коробке? И я не хочу использовать фоновые изображения!

Ну, вот где CSS3 псевдоэлементы могут вступить в игру. Они поддерживают свойство content которое позволяет вводить значки Юникода, представляющие любое состояние. В качестве альтернативы вы можете использовать сторонний источник значков шрифтов, такой как font awesome (хотя убедитесь, что вы также установили соответствующее font-family, например, FontAwesome)

label input {
  display: none; /* hide the default checkbox */
}

/* style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* style its checked state..with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

SW4 05 янв. 2015, в 12:07

0

То, что вы описали, это именно то, что я описал.
cobberboy 24 янв. 2015, в 15:53
13

За исключением: упрощенного HTML, упрощенного CSS, подробного объяснения.
SW4 30 янв. 2015, в 08:47
3

Клавиша Tab не работает
Anthony Hayward 23 июль 2015, в 12:06
4

@AnthonyHayward - обновленный ответ, это было связано с использованием display: ни один, который не создает экземпляр элемента управления в виде табуляции, я изменил
SW4 08 окт. 2015, в 21:02
1

Я изо всех сил пытался найти пример, в котором флажок был внутри ярлыка, а не до / после него. Это очень хорошо документированное и объясненное решение. Было бы здорово увидеть этот ответ обновленным за январь 2016 года.
Clarus Dignus 16 янв. 2016, в 07:19
1

По-прежнему не вкладки с display: none .
sam 04 март 2016, в 17:29
1

Заменить visibility: hidden; с opacity: 0 !important; если у вас все еще есть проблемы с табуляции.
jabacchetta 08 фев. 2017, в 07:32
0

@jabacchetta - обратите внимание, что в соответствии со спецификацией CSS, использование !important Important не рекомендуется, особенно для производственного кода (однако реальные потребности могут быть оправданы)
SW4 08 фев. 2017, в 20:52
0

Да, я обычно держусь подальше от !important . Но, похоже, это ЕДИНСТВЕННЫЙ способ сохранить вкладку с некоторыми из этих конструкций флажков. Я на самом деле сталкивался с этим, глядя на код, используемый в некоторых флажках Semantic UI.
jabacchetta 09 фев. 2017, в 15:14
0

@ SW4 Вы были награждены невидимым значком джентльмена / ученого от Kyle Vassella
Kyle Vassella 12 сен. 2017, в 15:49

Показать ещё 8 комментариев

28

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

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}

<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

И FIDDLE для приведенного выше кода. Обратите внимание, что некоторые CSS не работают в старых версиях браузеров, но я уверен, что есть несколько интересных примеров JavaScript!

Jake 17 авг. 2013, в 21:31

1

Выглядит круто, это .. переключатель.
commonpike 26 янв. 2014, в 14:50

24

Я бы последовал совету ответа SW4 - чтобы скрыть флажок и покрыть его пользовательским диапазоном, предлагая этот HTML

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

Обтекание метки позволяет аккуратно щелкать текст без необходимости связывания атрибута "for-id". Тем не мение,

не скрывайте его, используя `visibility: hidden` или `display: none`

Это работает, нажав или нажав, но это неэффективный способ использовать флажки. Некоторые люди все еще используют гораздо более эффективный tab для перемещения фокуса, space для активации, и сокрытие с помощью этого метода отключает его. Если форма длинная, кто-то сохранит запястья, чтобы использовать tabindex или accesskey. И если вы наблюдаете поведение системного флажка, то при наведении появляется приличная тень. Хорошо стилизованный флажок должен следовать за этим поведением.

Ответ cobberboy рекомендует Font Awesome, который обычно лучше растрового изображения, поскольку шрифты являются масштабируемыми векторами. Работая с HTML выше, я бы предложил следующие правила CSS:

Скрыть флажки
```
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
```
Я использую только отрицательный z-index так как в моем примере используется достаточно большая обложка флажка, чтобы полностью покрыть его. Я не рекомендую left: -999px так как он не может быть использован повторно в каждом макете. Ответ Бушана предоставляет пуленепробиваемый способ скрыть его и убедить браузер использовать tabindex, так что это хорошая альтернатива. Во всяком случае, оба это просто взломать. Правильный путь сегодня - это appearance: none, см. Ответ Joost:
```
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
```

Метка флажка стиля

input[type="checkbox"] + span {
  font: 16pt sans-serif;
  color: #000;
}

Добавить скин флажка
```
input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: '\00f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}
```
\00f096 - Font Awesome square-o, отступ настраивается так, чтобы обеспечить четкий контур на фокусе (см. Ниже).
Добавить флажок отмеченный скин
```
input[type="checkbox"]:checked + span:before {
  content: '\00f046';
}
```
\00f046 - это Font Awesome check-square-o, ширина которого не такая же, как у square-o, что является причиной описанного выше стиля ширины.
Добавить контур фокуса
```
input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}
```
Safari не предоставляет эту функцию (см. Комментарий @Jason Sankey), вы должны использовать window.navigator чтобы обнаружить браузер и пропустить его, если это Safari.
Установить серый цвет для отключенного флажка
```
input[type="checkbox"]:disabled + span {
  color: #999;
}
```
Установить тень при наведении на флажок без отключения
```
input[type="checkbox"]:not(:disabled) + span:hover:before {
  text-shadow: 0 1px 2px #77F;
}
```

демо фиддл

Попробуйте навести курсор мыши на флажки и используйте tab и shift + tab для перемещения и space для переключения.

Jan Turoň 30 сен. 2015, в 23:11

3

Upvote для освещения основной проблемы: подобные настройки не должны удалять основные функциональные возможности. Обратите внимание, что Safari не дает фокусу клавиатуры флажки (даже стандартные), что на мгновение смутило меня при реализации решения, включающего обработку фокуса.
Jason Sankey 15 фев. 2016, в 02:54
0

Кажется, флажки во фрагменте больше не работают? На хромированных windows 10
Félix Gagnon-Grenier 18 янв. 2019, в 19:33
0

@ FélixGagnon-Grenier кто-то отредактировал мой ответ и добавил сломанный фрагмент. Просто попробуйте демо Fiddle, где это работает.
Jan Turoň 19 янв. 2019, в 14:41
1

Хороший ответ. Предоставил основу для моего решения - я использовал существующую метку после ввода, где вы использовали дополнительный диапазон, и я получаю поддержку Edge & FF.
Jono 06 март 2019, в 15:16

Показать ещё 2 комментария

22

Простое в реализации и легко настраиваемое решение

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

Вам не нужны внешние библиотеки и файлы
Вам не нужно добавлять дополнительный HTML на вашей странице
Вам не нужно менять имена флажков и идентификатор

Просто поместите текущий CSS вверху вашей страницы, и стиль всех флажков изменится следующим образом:

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

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

Mohamed Nor 04 янв. 2017, в 22:54

1

Чем проще, тем лучше!
Adrian Moisa 24 янв. 2017, в 08:06
0

Это отличный ответ, он просто работает, не требуя ничего дополнительного
HeavyHead 02 июль 2018, в 10:02
0

Хороший и очень простой
khalidh 21 сен. 2018, в 16:09
0

Это не похоже на работу в IE
Akintunde-Rotimi 26 окт. 2018, в 13:16
0

Хорошее решение. Но я не вижу, что это работает на Firefox, IE или Edge (флажок отсутствует)
Jono 06 март 2019, в 15:00

Показать ещё 3 комментария

15

Я предпочитаю использовать иконки шрифтов (например, FontAwesome), поскольку их цвета легко изменить с помощью CSS, и они действительно хорошо масштабируются на устройствах с высокой плотностью пикселей. Итак, вот еще один чистый вариант CSS, использующий методы, аналогичные приведенным выше.

(Ниже статическое изображение, чтобы вы могли визуализировать результат; см. JSFiddle для интерактивной версии)

Как и в других решениях, он использует элемент label. Смежный span содержит наш флажок.

span.bigcheck-target {
  font-family: FontAwesome; /* use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

Вот JSFiddle для этого.

cobberboy 02 июль 2014, в 08:29

0

.... то, что вы описали, совпадает с предыдущими ответами Бхушана Уога, Джейка, Джонатана Ходжсона и Блейка;)
SW4 26 янв. 2015, в 08:53
7

@ SW4 Я ссылался на этот факт, за исключением того, что в этом ответе используются пиктограммы (которых не было ни в одном из предыдущих ответов). Первый абзац проясняет это.
cobberboy 26 янв. 2015, в 17:12
0

Вам необходимо заменить font-family: FontAwesome; с font-family: 'Font Awesome\ 5 Free'; и обновите содержимое Unicode, если вы хотите, чтобы оно работало в новой версии.
SuN 06 фев. 2019, в 11:44

Показать ещё 1 комментарий

13

Вы можете избежать добавления дополнительной разметки. Это работает везде, кроме IE для рабочего стола (но работает в IE для Windows Phone и Microsoft Edge) с помощью CSS appearance:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

Vadim Ovchinnikov 30 июнь 2017, в 16:39

3

Мне нравится этот подход - он немного хакерский, так как вам никогда не стоит использовать внешний вид в css, но он намного чище, чем некоторые другие ответы, использованные до и после. И для чего-то подобного я чувствую, что JavaScript полностью излишним.
Sprose 18 июль 2017, в 09:41
0

Большой! лучший ответ!
Faly 11 март 2019, в 18:17

12

Это довольно старый пост, но недавно я нашел довольно интересное решение проблемы.

Вы можете использовать appearance: none; чтобы снять флажок с его стилем по умолчанию, а затем написать свой собственный, как описано здесь (Пример 4).

Пример скрипки

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}

<input type="checkbox">

К сожалению, поддержка браузера довольно плоха для варианта appearance из моего личного тестирования. У меня только Opera и Chrome работают правильно. Но это был бы способ сохранить простоту, когда приходит лучшая поддержка или вы хотите использовать только Chrome/Opera.

"Могу ли я использовать?" ссылка на сайт

Joost 03 дек. 2015, в 08:31

0

Действительно, appearance - это как раз то, что нам нужно для этого; просто имейте в виду, что это «нестандартно и не соответствует стандартам» .
sam 12 фев. 2016, в 03:21

6

Вот простое решение CSS без jQuery или javascript

Я использую значки FontAwseome, но вы можете использовать любое изображение

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

aWebDeveloper 01 сен. 2014, в 12:22

1

В отличие от большинства других ответов, этот не требует создания дополнительных элементов label или span . Это просто работает!
KurtPreston 09 фев. 2017, в 15:22
0

Не могли бы вы показать пример или демонстрацию, или хотя бы часть HTML, с которой работает этот код CSS? @aWebDeveloper
iorgu 02 апр. 2017, в 01:38
0

@aWebDeveloper вносит правдивые изменения, чтобы отразить ответ или вопрос на домашней странице, что противоречит правилам.
TylerH 12 июль 2017, в 16:06
0

@ TylerH я не понимаю. что я сделал не так
aWebDeveloper 25 июль 2017, в 17:33
0

@aWebDeveloper Вы отредактировали старый ответ на неактивный вопрос, который переместил его на главную страницу и дал ссылку прямо на ваш ответ. Это хорошо, если у вас есть соответствующая информация для добавления или изменения в ответе. Все, что вы сделали, это вставили одно из ваших предложений в блок цитат, который никому не нужен.
TylerH 25 июль 2017, в 20:36
0

ох .... @ TylerH я никогда не знал, если это
aWebDeveloper 26 июль 2017, в 06:51
0

Это работает только в Chrome.
Vadim Ovchinnikov 26 июль 2017, в 13:40
0

должен работать @VadimOvchinnikov ... ничего тут не специфично для хрома
aWebDeveloper 26 июль 2017, в 15:05
0

Псевдоселекторы @aWebDeveloper для input работают только в Chrome. Если вы не согласны, можете ли вы поделиться простой демонстрацией, например, в jsfiddle, которая работает не только в Chrome? Посмотрите на этот jsfiddle.net/7e08adkj Вы увидите "ABC" только в Chrome.
Vadim Ovchinnikov 26 июль 2017, в 15:06

Показать ещё 7 комментариев

4

Мое решение

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

agirault 19 апр. 2018, в 20:16

0

Если бы кто-то мог посоветовать, почему мой текст не выровнен после, я хотел бы знать! CSS новичок здесь.
agirault 19 апр. 2018, в 18:56

4

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

Как предупреждение, это не реализация css. Я просто подумал, что поделюсь обходным решением, которое я придумал, если кто-то может найти его полезным.

Я использовал элемент HTML5 canvas.

Поверхность этого заключается в том, что вам не нужно использовать внешние изображения и, возможно, сэкономить некоторую пропускную способность.

Недостатком является то, что если браузер по какой-то причине не может корректно отобразить его, то нет никакого резервного. Хотя вопрос остается в 2017 году спорным.

Update

Я нашел старый код довольно уродливым, поэтому решил переписать его.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

Здесь рабочая демонстрация.

В новой версии используются прототипы и дифференциальное наследование для создания эффективной системы для создания флажков. Чтобы создать флажок:

var my_checkbox = Checkbox.create();

Это немедленно добавит флажок в DOM и подключит события. Чтобы проверить, установлен ли флажок:

my_checkbox.is_checked(); // true if checked, else false

Также важно отметить, что я избавился от цикла.

Обновление 2

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

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

Я немного изменил Checkbox, используемый в последнем фрагменте, так что он более общий, что позволяет "расширить" его флажком с 3 состояниями. Здесь демонстрация. Как вы можете видеть, он уже имеет больше функциональности, чем встроенный флажок.

Что-то, что нужно учитывать при выборе между JavaScript и CSS.

Старый, плохо разработанный код

Рабочий демонстрационный пример

Сначала создайте холст

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

Затем создайте способ для самого обновления холста.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1,1,13,13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2,2,11,11);
  }
  setTimeout(loop,1000/10); // refresh 10 times per second
})();

Последняя часть - сделать ее интерактивной. К счастью, это довольно просто:

canvas.onclick = function(){
  checked = !checked;
}

Здесь у вас могут быть проблемы с IE, из-за их странной модели обработки событий в javascript.

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

Braden Best 25 сен. 2013, в 00:53

0

Обратите внимание, что реализация Canvas, как эмуляция флажков, предоставляет больше функциональности, чем встроенные флажки. Например, такие причудливые вещи, как флажки «multi-state» (т. unchecked (eg unchecked -> checked -> "kinda" checked -> unchecked ; состояния могут представлять «явное ложное», «явное истина», «использовать по умолчанию», например). Я подумываю добавить пример к ответу.
Braden Best 20 фев. 2017, в 06:37
0

Страшная идея на мой взгляд.
user147215 15 фев. 2018, в 15:02
0

@ Нейл, пожалуйста, уточни
Braden Best 15 фев. 2018, в 17:56
0

Зачем изобретать велосипед?
user147215 21 фев. 2018, в 19:32
0

@ Нил, почему бы не изобретать велосипед? NIH не всегда плохая вещь, особенно когда она дает преимущества, которые иначе было бы невозможно или глупо сложно реализовать с помощью существующей технологии. Так что вопрос в том, готовы ли вы иметь дело со встроенными флажками. И если я хочу, чтобы они сочетались с визуальным языком моего сайта или приложения, я хочу получить полный контроль. Поэтому, пока кто-то не создаст автономную библиотеку пользовательского интерфейса, которая будет легкой и простой в использовании, я лично предпочитаю, чтобы мои колеса были изобретены здесь. Кто-то еще не может, но это не лишает законной силы мой ответ.
Braden Best 22 фев. 2018, в 05:08
0

... или обязательно сделать идею ужасной, на мой взгляд (ограничение персонажа)
Braden Best 22 фев. 2018, в 05:10

Показать ещё 4 комментария

4

Я думаю, что самый простой способ сделать это, стилизовав label и сделав checkbox невидимым.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

checkbox даже если он скрыт, все равно будет доступен, и его значение будет отправлено при отправке формы. Для старых браузеров вам, возможно, придется изменить класс label на checked, используя JavaScript, потому что я не думаю, что старые версии IE понимают ::checked checkbox.

Jonathan Hodgson 24 нояб. 2012, в 21:05

4

Разница между вашим ответом и моим в чем именно?
Blake Pettersson 05 дек. 2012, в 17:50
0

@BlakePettersson ваш правильно, :: проверил просто неправильно (я даже попробовал на всякий случай, если это также разрешено);)
esp 24 фев. 2013, в 00:31
4

Это плохой ответ. (a) ::checked неверно - должно быть :checked . (б) checkbox неправильный - он должен быть [type=checkbox]
Chris Morgan 04 фев. 2014, в 05:12

Показать ещё 1 комментарий

3

Простой и легкий шаблон:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

https://jsfiddle.net/rvgccn5b/

javad shariaty 16 авг. 2017, в 09:35

1

Псевдоэлементы для input поддерживаются только в Chrome, ваш код не работает одинаково во всех браузерах.
Vadim Ovchinnikov 26 апр. 2018, в 14:33

3

Измените стиль флажка с простым CSS3, не требуется никаких манипуляций с JS и HTML.

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<form class="form">
  <input type="checkbox" />
</form>

BEJGAM SHIVA PRASAD 16 дек. 2016, в 11:37

0

@VadimOvchinnikov У нас есть одно решение, которое требует следования некоторой html-структуре. Stackoverflow.com/questions/23305780/…
BEJGAM SHIVA PRASAD 17 авг. 2017, в 15:24

3

Не требуется JavaScript или Jquery.

Измените свой стиль флажка простым способом.

HTML

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

CSS

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

Вот ссылка JsFiddle: https://jsfiddle.net/05y2bge3/

Cherish 06 апр. 2016, в 11:21

2

На мой взгляд, это самый простой способ для создания стиля флажка. Просто добавьте: after и: checked: after css в зависимости от вашего дизайна.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}

<input type="checkbox"> <span>Select Text</span>

Mahfuzur Rahman 15 май 2018, в 06:40

0

Очень классное решение для браузеров, поддерживающих псевдоэлементы. :)
Jean-François Beauchamp 21 нояб. 2018, в 18:12

2

Вот только версия с CSS/HTML, без JQuery или Javascript, просто и простое html и очень простое и короткое css.

вот JSFiddle

http://jsfiddle.net/v71kn3pr/

Вот HTML

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>    
</div>

Вот CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

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

Этот html/css позволит вам также захватить щелчок на ярлыке, поэтому флажок будет отмечен и снят, даже если вы нажмете только на метке.

Этот тип флажка/переключателя отлично работает с любой формой, без проблем. Были протестированы с использованием php, aspx, javafaces и coldfusion.

Allan 04 сен. 2014, в 03:32

1

Кажется, вы можете изменить цвет флажка в оттенках серого только с помощью CSS.

Ниже перечислены флажки от черного до серого (что было о том, что я хотел):

input[type="checkbox"] {
    opacity: .5;
}

Ellis 17 нояб. 2017, в 17:07

0

это делает границу света тоже. Кроме того, вы не можете увидеть чек, если вы проверите его.
Rachel S 07 май 2018, в 15:54

1

Так как браузеры, такие как edge и firefox, не поддерживают: before: after on checkbox input tags, вот альтернатива просто с html и css. Конечно, вы должны отредактировать css в соответствии с вашими требованиями.

Сделайте html для этого флажка следующим образом:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

Примените этот стиль для флажка, чтобы изменить цветную метку

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

Muhammad Usman 10 нояб. 2017, в 07:59

1

Это самый простой способ, и вы можете выбрать, какие флажки придать этому стилю.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

Ali Gonabadi 21 июль 2015, в 14:44

1

Нет, вы по-прежнему не можете сами установить флажок, но я (наконец) понял, как создать иллюзию, а сохранить функциональность, щелкнув флажок. Это означает, что вы можете переключать его, даже если курсор не совсем по-прежнему не рискует выбрать текст или вызвать перетаскивание!

Это решение, вероятно, также подходит для переключателей.

В IE9, FF30.0 и Chrome 40.0.2214.91 работает только один пример. Вы все равно можете использовать его в сочетании с фоновыми изображениями и псевдоэлементами.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

LGT 24 янв. 2015, в 13:19

1

input[type=checkbox].css-checkbox {
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; 
    width:1px; 
    margin:-1px; 
    padding:0;
    border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left:20px;
    height:15px; 
    display:inline-block;
    line-height:15px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:15px;
    vertical-align:middle;
    cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}

Bhushan wagh 21 апр. 2014, в 15:08

1

Предупреждение: на момент написания было правдоподобно, но тем временем все продвигалось.

Современные браузеры AFAIK отображают флажки, используя собственный ОС, поэтому нет способа их стилизовать.

Joril 10 нояб. 2010, в 20:21

27

Возможно, это было правдой в 10 году, но не сейчас, вы должны удалить этот ответ.
Michał K 21 фев. 2013, в 08:40
1

Это по-прежнему верно - все современные браузеры отображают флажки с использованием встроенного контроля ОС. Просто есть некоторые интересные новые методы, чтобы обойти это ограничение.
Gal 02 июнь 2015, в 23:04
0

Да, я имел в виду часть "нет способа стилизовать их" ^^
Joril 04 июнь 2015, в 09:59

Показать ещё 1 комментарий

-2

Вы можете использовать iCheck это настраиваемые флажки и переключатели для jQuery и Zepto, возможно, это поможет вам

Убедитесь, что jQuery v1.7 + загружен до icheck.js

Выберите цветовую схему, доступно 10 различных стилей:
- Черный - minimal.css
- Red - red.css
- Зеленый - green.css
- Blue - blue.css
- Aero - aero.css
- Серый - grey.css
- Оранжевый - orange.css
- Желтый - yellow.css
- Pink - pink.css
- Фиолетовый - purple.css
Скопировать/скины/минимальная/папка и файл icheck.js на ваш сайт.
Вставьте перед собой в свой HTML (замените свой путь и цветовую схему):

Пример для схемы красного цвета:

<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

Добавьте в свой HTML флажки и переключатели:

Добавьте JavaScript в свой HTML для запуска плагина iCheck:

<script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
        increaseArea: '20%' // optional
      });
   });
</script>

В отличие от черных цветовых схем используйте этот код (пример для красного):

<script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal-red',
        radioClass: 'iradio_minimal-red',
        increaseArea: '20%' // optional
      });
   });
</script>

Готово

Yaseen 29 фев. 2016, в 11:57

-11

быстро исправить, чтобы добавить значок перед текстом:

< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

NNM 17 сен. 2013, в 08:19

1

жерех: CheckBox? Что это в CSS / HTML?
Sanket Sahu 11 июнь 2014, в 06:31
6

и CSS HTML это: <i dont = 'понимать' вопрос = '/>
Gal 02 июнь 2015, в 23:06

Ещё вопросы

я думаю, что вы ищете что-то вроде этого: asimishaq.com/myfiles/image-checkbox Смотрите это сообщение: stackoverflow.com/questions/16352864/…
Я написал учебник о том, как настраивать флажки и радио только с помощью CSS, а также создавать переключатели вкл / выкл. Проверьте это!
ссылка в комментарии выше. в любом случае: blog.felixhagspiel.de/index.php/posts/custom-inputs
Вот это да. Глядя на все эти ответы, я просто должен сказать: « Вся эта работа только для того, чтобы поставить на экран стильный флажок».
@ Блейк Петтерссон будет работать в IE 8+?
@GandalfStormCrow это будет работать для любого браузера, который поддерживает псевдокласс: checked, который IE8 НЕ поддерживает. Вы можете проверить, работает ли это с selectivizr.com - который добавляет поддержку: selected и friends.
Другими словами, IE9 и более поздние версии поддерживают: проверено.
Существует полифилл для IE8 и ниже: github.com/rdebeasi/checked-polyfill
@Tim Ссылка ployfill, которой вы поделились, не работает
Это работает, но впервые мерцает. Почему это происходит?
Я считаю, что скрытый input никогда не фокусируется на клавиатуре, поэтому он недоступен для клавиатуры.
Обновлен пример использования position: relative и отрицательный z-index .
Превосходная работа, работал как шарм с несколькими модами для моего дизайна. Спасибо!
Firefox 33.1 / Linux: скрипка показывает только флажки по умолчанию. Ничто не выглядит иначе.
@robsch Это четко указано в оригинальном сообщении. Версия Firefox или ОС не имеет значения, она не работает в Firefox. «FF + IE по-прежнему будет позволять работать флажкам, просто не стилизованным ...»
Хороший подход. Но не все браузеры делают это хорошо. Насколько я знаю, только Chrome имеет лучший результат.
Очень хорошо. Однако ... Это снова подход IE 5.x. Только Webkit. Потому что это не всегда следует правилам ... В этом и заключается вся проблема браузеров webkit.
Лучшее решение! +1 Но я не вижу смысла писать такой большой пример. 30 строк для описания идеи будет достаточно.
Я получаю флажки по умолчанию в Firefox 58 и IE11 на Win тоже.
@AndriiBogachenko Напротив, наличие подробного примера отлично подходит для качественного ответа.
То, что вы описали, это именно то, что я описал.
За исключением: упрощенного HTML, упрощенного CSS, подробного объяснения.
@AnthonyHayward - обновленный ответ, это было связано с использованием display: ни один, который не создает экземпляр элемента управления в виде табуляции, я изменил
Я изо всех сил пытался найти пример, в котором флажок был внутри ярлыка, а не до / после него. Это очень хорошо документированное и объясненное решение. Было бы здорово увидеть этот ответ обновленным за январь 2016 года.
По-прежнему не вкладки с display: none .
Заменить visibility: hidden; с opacity: 0 !important; если у вас все еще есть проблемы с табуляции.
@jabacchetta - обратите внимание, что в соответствии со спецификацией CSS, использование !important Important не рекомендуется, особенно для производственного кода (однако реальные потребности могут быть оправданы)
Да, я обычно держусь подальше от !important . Но, похоже, это ЕДИНСТВЕННЫЙ способ сохранить вкладку с некоторыми из этих конструкций флажков. Я на самом деле сталкивался с этим, глядя на код, используемый в некоторых флажках Semantic UI.
@ SW4 Вы были награждены невидимым значком джентльмена / ученого от Kyle Vassella
Выглядит круто, это .. переключатель.
Upvote для освещения основной проблемы: подобные настройки не должны удалять основные функциональные возможности. Обратите внимание, что Safari не дает фокусу клавиатуры флажки (даже стандартные), что на мгновение смутило меня при реализации решения, включающего обработку фокуса.
Кажется, флажки во фрагменте больше не работают? На хромированных windows 10
@ FélixGagnon-Grenier кто-то отредактировал мой ответ и добавил сломанный фрагмент. Просто попробуйте демо Fiddle, где это работает.
Хороший ответ. Предоставил основу для моего решения - я использовал существующую метку после ввода, где вы использовали дополнительный диапазон, и я получаю поддержку Edge & FF.
Это отличный ответ, он просто работает, не требуя ничего дополнительного
Хорошее решение. Но я не вижу, что это работает на Firefox, IE или Edge (флажок отсутствует)
.... то, что вы описали, совпадает с предыдущими ответами Бхушана Уога, Джейка, Джонатана Ходжсона и Блейка;)
@ SW4 Я ссылался на этот факт, за исключением того, что в этом ответе используются пиктограммы (которых не было ни в одном из предыдущих ответов). Первый абзац проясняет это.
Вам необходимо заменить font-family: FontAwesome; с font-family: 'Font Awesome\ 5 Free'; и обновите содержимое Unicode, если вы хотите, чтобы оно работало в новой версии.
Мне нравится этот подход - он немного хакерский, так как вам никогда не стоит использовать внешний вид в css, но он намного чище, чем некоторые другие ответы, использованные до и после. И для чего-то подобного я чувствую, что JavaScript полностью излишним.
Действительно, appearance - это как раз то, что нам нужно для этого; просто имейте в виду, что это «нестандартно и не соответствует стандартам» .
В отличие от большинства других ответов, этот не требует создания дополнительных элементов label или span . Это просто работает!
Не могли бы вы показать пример или демонстрацию, или хотя бы часть HTML, с которой работает этот код CSS? @aWebDeveloper
@aWebDeveloper вносит правдивые изменения, чтобы отразить ответ или вопрос на домашней странице, что противоречит правилам.
@ TylerH я не понимаю. что я сделал не так
@aWebDeveloper Вы отредактировали старый ответ на неактивный вопрос, который переместил его на главную страницу и дал ссылку прямо на ваш ответ. Это хорошо, если у вас есть соответствующая информация для добавления или изменения в ответе. Все, что вы сделали, это вставили одно из ваших предложений в блок цитат, который никому не нужен.
ох .... @ TylerH я никогда не знал, если это
должен работать @VadimOvchinnikov ... ничего тут не специфично для хрома
Псевдоселекторы @aWebDeveloper для input работают только в Chrome. Если вы не согласны, можете ли вы поделиться простой демонстрацией, например, в jsfiddle, которая работает не только в Chrome? Посмотрите на этот jsfiddle.net/7e08adkj Вы увидите "ABC" только в Chrome.
Если бы кто-то мог посоветовать, почему мой текст не выровнен после, я хотел бы знать! CSS новичок здесь.
Обратите внимание, что реализация Canvas, как эмуляция флажков, предоставляет больше функциональности, чем встроенные флажки. Например, такие причудливые вещи, как флажки «multi-state» (т. unchecked (eg unchecked -> checked -> "kinda" checked -> unchecked ; состояния могут представлять «явное ложное», «явное истина», «использовать по умолчанию», например). Я подумываю добавить пример к ответу.
@ Нил, почему бы не изобретать велосипед? NIH не всегда плохая вещь, особенно когда она дает преимущества, которые иначе было бы невозможно или глупо сложно реализовать с помощью существующей технологии. Так что вопрос в том, готовы ли вы иметь дело со встроенными флажками. И если я хочу, чтобы они сочетались с визуальным языком моего сайта или приложения, я хочу получить полный контроль. Поэтому, пока кто-то не создаст автономную библиотеку пользовательского интерфейса, которая будет легкой и простой в использовании, я лично предпочитаю, чтобы мои колеса были изобретены здесь. Кто-то еще не может, но это не лишает законной силы мой ответ.
... или обязательно сделать идею ужасной, на мой взгляд (ограничение персонажа)
Разница между вашим ответом и моим в чем именно?
@BlakePettersson ваш правильно, :: проверил просто неправильно (я даже попробовал на всякий случай, если это также разрешено);)
Это плохой ответ. (a) ::checked неверно - должно быть :checked . (б) checkbox неправильный - он должен быть [type=checkbox]
Псевдоэлементы для input поддерживаются только в Chrome, ваш код не работает одинаково во всех браузерах.
@VadimOvchinnikov У нас есть одно решение, которое требует следования некоторой html-структуре. Stackoverflow.com/questions/23305780/…
Очень классное решение для браузеров, поддерживающих псевдоэлементы. :)
это делает границу света тоже. Кроме того, вы не можете увидеть чек, если вы проверите его.
Возможно, это было правдой в 10 году, но не сейчас, вы должны удалить этот ответ.
Это по-прежнему верно - все современные браузеры отображают флажки с использованием встроенного контроля ОС. Просто есть некоторые интересные новые методы, чтобы обойти это ограничение.
Да, я имел в виду часть "нет способа стилизовать их" ^^
и CSS HTML это: <i dont = 'понимать' вопрос = '/>

Jacob Mattison · Accepted Answer · 2010-11-10T20-41-00.000Z

ОБНОВЛЕНИЕ: приведенный ниже ответ ссылается на положение вещей до широкого распространения CSS3. В современных браузерах (включая Internet Explorer 9 и более поздние версии) проще создавать замены флажков с использованием предпочитаемого вами стиля без использования JavaScript.

Вот несколько полезных ссылок:

Стоит отметить, что фундаментальный вопрос не изменился. Вы по-прежнему не можете применять стили (границы и т.д.) Непосредственно к элементу флажка, и эти стили влияют на отображение флажка HTML. Однако изменилось то, что теперь стало возможным скрыть фактический флажок и заменить его собственным элементом в стиле, используя только CSS. В частности, поскольку CSS теперь имеет широко поддерживаемый селектор :checked, вы можете сделать так, чтобы ваша замена корректно отражала статус флажка.

СТАРЫЙ ОТВЕТ

Здесь полезная статья о стилях чекбоксов. По сути, автор обнаружил, что он сильно варьируется от браузера к браузеру и что многие браузеры всегда отображают флажок по умолчанию, независимо от того, как вы его стилизуете. Так что на самом деле не так просто.

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

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

Этот ответ стареет! Основная ссылка ведет на сайт, сравнивающий стили IE6 и IE7 ...
Честная точка зрения - и в современных браузерах суть не совсем верна. Я обновил некоторые новые ссылки, но оставил оригинал в качестве ресурса для старых браузеров.
Easy CSS Checkbox Generator , был действительно простым и дружественным к n00b. Поставляется с графическим интерфейсом для индивидуального создания тоже! Хорошо ценится. :)
Мне интересен старый ответ, потому что я хочу, чтобы эта функция была совместима с IE8 + и другими браузерами (Chrome, Firefox и Safari). Однако я не могу найти много отзывов относительно плагина, который вы рекомендуете ryanfait.com/resources/custom-checkboxes-and-radio-buttons
этот плагин JS кажется довольно хорошим. Совместимость с браузерами IE7 +, Chrome, Firefox, Safari и мобильными устройствами github.com/arthurgouveia/prettyCheckable
обратите внимание, что prettyCheckable не «совместим» с этой техникой stackoverflow.com/questions/306252/…
Большинство этих ссылок ведут на страницы, которые, по-видимому, считают, что ярлык должен быть пустым. Я бы порекомендовал этот codepen: codepen.io/CreativeJuiz/pen/BiHzp вместо этого.
Это не очень полезный ответ - это просто список статей, большинство из которых сейчас очень старые.

Как оформить флажок с помощью CSS?

27 ответов

Прежде чем начать (по состоянию на январь 2015 года)

Решение (в принципе)

Решение (в коде)

Уточнение (с помощью значков)

не скрывайте его, используя visibility: hidden или display: none

демо фиддл

Простое в реализации и легко настраиваемое решение

Мое решение

Update

Обновление 2

Старый, плохо разработанный код

Ещё вопросы

не скрывайте его, используя `visibility: hidden` или `display: none`