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


831

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

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

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



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


1
ссылка в комментарии выше. в любом случае: blog.felixhagspiel.de/index.php/posts/custom-inputs
Феликс Хагспил

1
Ух ты. Глядя на все эти ответы, я просто должен сказать: « Вся эта работа только для того, чтобы поставить на экран стильный флажок»
Майкл,

Ответы:


784

ОБНОВИТЬ:

Приведенный ниже ответ ссылается на положение дел до появления широко распространенного CSS 3. В современных браузерах (включая Internet Explorer 9 и более поздние версии) проще создавать замены флажков с использованием предпочитаемого вами стиля без использования JavaScript.

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

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


СТАРЫЙ ОТВЕТ

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

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

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


34
Этот ответ стареет! Основная ссылка ведет на сайт, сравнивающий стили IE6 и IE7 ...
Джонатан Литтке

7
Честная точка зрения - и в современных браузерах суть не совсем верна. Я обновил некоторые новые ссылки, но оставил оригинал как ресурс для старых браузеров.
Джейкоб Мэттисон

3
Easy CSS Checkbox Generator , был действительно простым и дружественным к n00b. Поставляется с графическим интерфейсом для индивидуального создания тоже! Хорошо ценится. :)
CᴴᴀZ

Мне интересен старый ответ, потому что я хочу, чтобы эта функция была совместима с IE8 + и другими браузерами (Chrome, Firefox и Safari). Однако я не могу найти много отзывов о плагине, который вы рекомендуете ryanfait.com/resources/custom-checkboxes-and-radio-buttons
Adrien Be

2
Это не очень полезный ответ - это просто список статей, большинство из которых сейчас очень старые.
Стив Беннетт

141

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

.myCheckbox input {
  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");
}
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>


@GandalfStormCrow это будет работать для любого браузера, который поддерживает псевдокласс: checked, который IE8 НЕ поддерживает. Вы можете проверить, работает ли это с selectivizr.com - который добавляет поддержку: флажок и друзья.
Блейк Петтерссон

Другими словами, IE9 и более поздние версии поддерживают: проверено.
Блейк Петтерссон

1
Существует полифилл для IE8 и ниже: github.com/rdebeasi/checked-polyfill
Тим

Это работает, но впервые мерцает. Почему это происходит?
технофил

Я считаю, что скрытые inputклавиши никогда не фокусируются на клавиатуре, поэтому они недоступны с клавиатуры.
Сэм

139

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

Обратите внимание, что это будет работать только для совместимых браузеров. Я считаю, что это связано с тем, что некоторые браузеры не позволяют устанавливать :afterи :beforeвводить элементы. К сожалению, это означает, что на данный момент поддерживаются только браузеры WebKit. Firefox + Internet Explorer по-прежнему будет разрешать работу флажков, просто не применяя стиль, и, надеюсь, это изменится в будущем (код не использует префиксы поставщиков).

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


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

1
@robsch Это ясно указано в оригинальном сообщении. Версия Firefox или ОС не имеет значения, она не работает в Firefox. «FF + IE по-прежнему будет позволять работать флажкам, просто не стилизованным ...»
Джош Мак

Хороший подход. Но не все браузеры делают это хорошо. Насколько я знаю, только Chrome имеет лучший результат.
EA

Очень хорошо. Однако ... Это снова подход IE 5.x. Только Webkit. Потому что это не всегда следует правилам ... В этом и заключается вся проблема браузеров webkit.
Алекс

1
Лучшее решение! +1 Но я не вижу смысла писать такой большой пример. 30 строк для описания идеи будет достаточно.
Андрей Богаченко

136

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

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

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

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

  2. Со скрытым элементом управления вам все равно нужно будет иметь возможность обнаруживать и переключать его проверенное состояние

  3. Проверенное состояние флажка должно быть отражено с помощью стилизации нового элемента.

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

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

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

  2. Скрыть свой флажок

  3. Добавьте новый элемент после флажка, который вы будете соответствующим образом стилизовать. Он должен появиться после флажка, поэтому его можно выбрать с помощью CSS и стилизовать в зависимости от :checkedсостояния. CSS не может выбрать «назад».

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

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

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

Ну, вот где псевдоэлементы CSS3 могут вступить в игру. Они поддерживают contentсвойство, которое позволяет вводить значки Unicode, представляющие любое состояние. В качестве альтернативы, вы можете использовать сторонний источник значков шрифтов, такой как 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>


14
За исключением: упрощенного HTML, упрощенного CSS, подробного объяснения.
SW4

4
@AnthonyHayward - обновленный ответ, это было связано с использованием отображения: ни один, который не создает экземпляр элемента управления в виде вкладок, я изменил
SW4

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

1
Все еще не с вкладками display: none.
Сэм

2
Замените visibility: hidden;на, opacity: 0 !important;если у вас все еще есть проблемы с табуляции.
Jabacchetta

40

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

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

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

Не скрывайте это с помощью visibility: hiddenилиdisplay: none

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

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

  1. Скрыть флажки

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    Я использую только негатив, z-indexтак как мой пример использует достаточно большую обложку флажка, чтобы полностью покрыть его. Я не рекомендую, left: -999pxтак как он не может быть повторно использован в каждом макете. Ответ Бушана Вагха обеспечивает пуленепробиваемый способ скрыть это и убедить браузер использовать tabindex, так что это хорошая альтернатива. Во всяком случае, оба это просто взломать. Правильный путь сегодня appearance: none, см . Ответ Джоста :

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
  2. Метка флажка стиля

    input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
    }
  3. Добавить скин флажка

    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 это шрифт Awesome's square-o , отступы настраиваются так, чтобы обеспечить четкий контур на фокусе (см. ниже).

  4. Добавить флажок отмеченный скин

    input[type="checkbox"]:checked + span:before {
      content: '\00f046';
    }

    \00f046это Font Awesome's check-square-o, ширина которого не равнаsquare-o , что является причиной стиля ширины, указанного выше.

  5. Добавить контур фокуса

    input[type="checkbox"]:focus + span:before {
      outline: 1px dotted #aaa;
    }

    Safari не предоставляет эту функцию (см. Комментарий @Jason Sankey), вы должны использовать window.navigator чтобы обнаружить браузер и пропустить его, если это Safari.

  6. Установить серый цвет для отключенного флажка

    input[type="checkbox"]:disabled + span {
      color: #999;
    }
  7. Установить тень при наведении на флажок без отключения

    input[type="checkbox"]:not(:disabled) + span:hover:before {
      text-shadow: 0 1px 2px #77F;
    }

Демо Фиддл

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


3
Upvote для освещения основной проблемы: подобные настройки не должны удалять основные функциональные возможности. Обратите внимание, что Safari не дает фокусировке на клавиатуре флажки (даже стандартные), что на мгновение смутило меня при реализации решения, включающего обработку фокуса.
Джейсон Сэнки

Это кажется флажки в сниппаешь не работает больше? На хромированных окнах 10
Феликс Ганьон-Гренье

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

2
Большинство из этих ответов игнорируют доступность. Мне нравится, что этот ответ держит это в такте.
maxshuty

1
@maxshuty Мне также нравится ваш подход: когда кто-то создает библиотеку, часто это просто признание, что он не может написать простой код на родном языке по своему выбору. ИМХО FontAwesome облажался со своим планом Free с использованием javascript для загрузки шрифта, но они мне все еще нравятся, поскольку они остаются открытым исходным кодом и бесплатной лицензией. Я обычно заканчиваю подмножеством шрифтов подмножество бесплатных иконок, которые мне нужны в конкретном проекте (обычно максимум 5 КБ). Я с радостью заплатил бы, если бы они сэкономили мне силы, но не безумные 99 долларов в год, как они предлагают в своем плане Pro.
Ян Туро

30

Вы можете стилизовать флажки с небольшой хитростью, используя 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!


28

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

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

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

Просто поместите текущий 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;
}

1
Чем проще, тем лучше!
Адриан Мойса

Это отличный ответ, он просто работает, не требуя ничего дополнительного
HeavyHead

Хороший и очень простой
Халид

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

20

Вы можете избежать добавления дополнительной разметки. Это работает везде, кроме 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" />


3
Мне нравится этот подход - он немного хакерский, так как вам никогда не стоит использовать внешний вид в css, но он намного чище, чем некоторые другие ответы, использованные до и после. И для чего-то подобного я чувствую, что JavaScript полностью излишним.
Спрос

18

Я предпочитаю использовать иконки шрифтов (например, 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 для этого.


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

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

Вам необходимо заменить font-family: FontAwesome;с font-family: 'Font Awesome\ 5 Free';, и обновлять содержимое юникода , если вы хотите , чтобы заставить его работать в новой версии.
19

12

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

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

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

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

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


На самом деле appearanceэто как раз то, что нам нужно для этого; просто имейте в виду, что это «нестандартно и не соответствует стандартам» .
Сэм

12

С чистым CSS, ничего особенного :beforeи :afterбез преобразований, вы можете отключить внешний вид по умолчанию, а затем оформить его с помощью встроенного фонового изображения, как показано в следующем примере. Это работает в Chrome, Firefox, Safari и теперь Edge (Chromium Edge).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>


1
Да! Только тот, который на самом деле приличный.
Одино - Велмонт

10

Мое решение

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>


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

8

Вы можете просто использовать appearance: noneв современных браузерах, чтобы не было стилей по умолчанию и все ваши стили применялись правильно:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

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

1
Это особенно минималистский образец, который работал для моего случая, спасибо!
Джейсон Р Стивенс CFA

8

Хотите НЕТ JavaScript, НЕТ внешних библиотек, соответствия доступности, а также флажков и радиокнопок?

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

Скрипки :

  • Флажки - чистый CSS - бесплатно от сторонних библиотек
  • Радио кнопки - чистый CSS - без сторонних библиотек
  • Флажки *, которые используют FontAwesome, но могут быть легко заменены на глифы и т. Д.

Поздно к вечеринке, но каким-то образом это все еще сложно в 2019–2020 годах, поэтому я добавил свои три решения, которые доступны и легко доступны .

Все это JavaScript бесплатно , внешняя библиотека бесплатно * , и доступ к ...

Если вы хотите подключиться к любому из них, просто скопируйте таблицу стилей из скрипок, отредактируйте цветовые коды в CSS, чтобы они соответствовали вашим потребностям, и вы уже в пути. Вы можете добавить собственный значок галочки svg, если вы хотите для флажков. Я добавил много комментариев для тех, кто не из CSS'ы.

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

Более подробное объяснение: мне нужно решение, которое не нарушает WCAG, не зависит от JavaScript или внешних библиотек, и которое не нарушает навигацию клавиатуры, такую ​​как вкладки или пробел, чтобы выбрать, которое позволяет фокусировать события, решение, которое позволяет отключить флажки, которые оба проверены и бесконтрольно, и , наконец, решение , в котором я могу настроить внешний вид флажка , однако я хочу с различными background-color«s, border-radius, svgфоны и т.д.

Я использовал комбинацию этого ответа от @Jan Turoň, чтобы придумать собственное решение, которое, кажется, работает очень хорошо. Я сделал скриптовую кнопку с переключателями, которая использует много одинакового кода из флажков, чтобы сделать эту работу также с переключателями.

Я все еще изучаю доступность, поэтому, если я что-то пропустил, пожалуйста, оставьте комментарий, и я постараюсь исправить это, вот пример кода моих флажков:

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}
<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>


Я тоже добавил свой собственный ответ , надеюсь, он кому-нибудь поможет. Я использовал их в своем. :) Надеюсь, кто-то увидит это.
г-н Поливирл

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;
}

1
В отличие от большинства других ответов, этот не требует создания дополнительных labelили spanэлементов. Это просто работает!
КуртПрестон,

Не могли бы вы показать пример или демонстрацию, или хотя бы часть HTML, с которой работает этот код CSS? @aWebDeveloper
Шандор Зуболы,

@aWebDeveloper вносит правдивые изменения, чтобы отразить ответ или вопрос на домашней странице, что противоречит правилам.
TylerH

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

должен работать @VadimOvchinnikov ... ничто здесь не является специфичным для хрома
aWebDeveloper

6

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

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>


Очень классное решение для браузеров, поддерживающих псевдоэлементы. :)
Жан-Франсуа Бошан

6

Измените стиль флажка с простым 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>


@VadimOvchinnikov У нас есть одно решение , которое требует , чтобы последовавший HTML структура .. stackoverflow.com/questions/23305780/...
BEJGAM SHIVA ПРАСАД

4

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

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/


1
Псевдоэлементы для inputs поддерживаются только в Chrome, код работает не во всех браузерах.
Вадим Овчинников

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чтобы проверить с помощью JavaScript , потому что я не думаю , что старые версии Internet Explorer понять ::checkedна checkbox.


4
Разница между вашим ответом и моим в чем именно?
Блейк Петтерссон

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

7
Это плохой ответ. (а) ::checkedнеправильно - так и должно быть :checked. (б) checkboxнеправильно - так и должно быть[type=checkbox]
Крис Морган

4

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

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


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

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

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

Обновить

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

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.


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


Обратите внимание, что реализация Canvas, как эмуляция флажков, обеспечивает большую функциональность, чем встроенные флажки. Например, причудливые вещи, такие как флажки «multi-state» (например unchecked (e.g. unchecked -> checked -> "kinda" checked -> unchecked, состояния могут представлять «явное ложное», «явное истина», «использовать значение по умолчанию», например). Я подумываю добавить пример к ответу.
Брэден Бест

Страшная идея на мой взгляд.

@ Нил, пожалуйста, уточни
Бест

Зачем изобретать велосипед?

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

3

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

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>

3

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

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

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;
}
<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

Вот ссылка JsFiddle


Этот флажок не отображается, поскольку он опирается на внешние ссылки на файлы изображений imgh.us/uncheck.png и imgh.us/check_2.png, которые больше не доступны в Интернете.
jkdev

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, ASP.NET (.aspx), JavaServer Faces и ColdFusion .


2
**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser's default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

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);
}

Объяснение будет в порядке.
Питер Мортенсен

1

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

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

Следующее работает в Internet Explorer 9, Firefox 30.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>

1

Поскольку браузеры, такие как Edge и Firefox, не поддерживают теги ввода: before: after on, здесь есть альтернатива исключительно с 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>

1

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

Следующее преобразует флажки из черного в серый (что было примерно то, что я хотел):

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

это делает границу света тоже. Кроме того, вы не можете увидеть чек, если вы проверите его.
Рэйчел С

1

Внедрение SCSS / SASS

Более современный подход

Для тех, кто использует SCSS (или легко конвертируется в SASS), будет полезно следующее. По сути, сделайте элемент рядом с флажком, который вы будете стилизовать. Когда флажок установлен, CSS изменяет стиль сестринского элемента (к вашему новому, проверенному стилю). Код ниже:

label.checkbox {
  input[type="checkbox"] {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;

    &:checked + span {
      background: $accent;
    }
  }

  span {
    cursor: pointer;
    height: 15px;
    width: 15px;
    border: 1px solid $accent;
    border-radius: 2px;
    display: inline-block;
    transition: all 0.2s $interpol;
  }
}
<label class="checkbox">
    <input type="checkbox" />
    <span></span>
    Label text
</label>


0

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

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


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

3
Это по-прежнему верно - все современные браузеры отображают флажки с использованием встроенного контроля ОС. Просто есть некоторые интересные новые методы, чтобы обойти это ограничение.
Гал

Да, я имел в виду часть «нет никакого способа их
стилизовать
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.