MENU
  1. ホーム
  2. HTML&CSS
  3. 【html&css】コピペで作る！おしゃれなチェックボックスデザイン3選

【html&css】コピペで作る！おしゃれなチェックボックスデザイン3選

HTML&CSS
checkbox-design-001

本記事では、おしゃれなチェックボックスデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに作ることができます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、チェックボックス作成にはHTMLのinputタグを利用します。

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

さらに、チェックボックスの作り方から理解したい人は「【HTML】チェックボックスの作り方：サイズ変更やCSSデザイン・値の取得」を一読ください。

【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携
【HTML】チェックボックスの作り方：サイズ変更やCSSデザイン・値の取得
目次

おしゃれなフリー素材デザイン集

本サイトでは、チェックボックス以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock
Code Stock | UIコピペサイト UIコピペサイト

ボタン型のチェックボックス

ここでは、以下のボタン型のチェックボックスデザイン例を記載しています。

ボタン型のチェックボックスデザイン
  • スタンダード
  • 背景色あり

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もボックスページでは選択式でご用意しました。

調整項目一覧
  • 基調色
  • 並びの向き：横, 縦
  • 形状：四角, 角丸（円）

ご興味があれば「チェックボックス一覧ページ」を一読ください。

Code Stock
CHECK-BOX | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Button type ボタン型のチェックボックス radio1 radio2 radio3 スタンダード▼ radio1 radio2…

スタンダード

HTML｜並びの向き：横, 形状：角丸
<fieldset class="checkbox-2">
  <label>
    <input type="checkbox" name="checkbox-2" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-2"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-2"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：横, 形状：角丸
.checkbox-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-2 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-2 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-2 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-2 input {
  display: none;
}
HTML｜並びの向き：横, 形状：円
<fieldset class="checkbox-3">
  <label>
    <input type="checkbox" name="checkbox-3" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-3"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-3"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：横, 形状：円
.checkbox-3 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-3 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-3 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-3 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-3 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-3 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-3 input {
  display: none;
}
HTML｜並びの向き：縦, 形状：角丸
<fieldset class="checkbox-4">
  <label>
    <input type="checkbox" name="checkbox-4" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-4"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-4"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：縦, 形状：角丸
.checkbox-4 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-4 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-4 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-4 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-4 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-4 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-4 input {
  display: none;
}
HTML｜並びの向き：縦, 形状：円
<fieldset class="checkbox-5">
  <label>
    <input type="checkbox" name="checkbox-5" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-5"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-5"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：縦, 形状：円
.checkbox-5 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-5 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-5 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-5 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-5 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-5 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-5 input {
  display: none;
}

背景色あり

HTML｜並びの向き：横, 形状：角丸
<fieldset class="checkbox-6">
  <label>
    <input type="checkbox" name="checkbox-6" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-6"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-6"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：横, 形状：角丸
.checkbox-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-2 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-2 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-2 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-2 input {
  display: none;
}
HTML｜並びの向き：横, 形状：円
<fieldset class="checkbox-7">
  <label>
    <input type="checkbox" name="checkbox-7" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-7"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-7"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：横, 形状：円
.checkbox-7 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-7 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-7 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-7 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-7 label::before {
  background-color: #e6edf3;
  border: none;
}

.checkbox-7 label:has(:checked)::before {
  background-color: #2589d0;
}

.checkbox-7 label:has(:checked)::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.checkbox-7 input {
  display: none;
}
HTML｜並びの向き：縦, 形状：角丸
<fieldset class="checkbox-8">
  <label>
    <input type="checkbox" name="checkbox-8" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-8"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-8"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：縦, 形状：角丸
.checkbox-8 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-8 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-8 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-8 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-8 label::before {
  background-color: #e6edf3;
  border: none;
}

.checkbox-8 label:has(:checked)::before {
  background-color: #2589d0;
}

.checkbox-8 label:has(:checked)::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.checkbox-8 input {
  display: none;
}
HTML｜並びの向き：縦, 形状：円
<fieldset class="checkbox-9">
  <label>
    <input type="checkbox" name="checkbox-9" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-9"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-9"/>
    radio3
  </label>
</fieldset>
CSS｜並びの向き：縦, 形状：円
.checkbox-9 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-9 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-9 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-9 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-9 label::before {
  background-color: #e6edf3;
  border: none;
}

.checkbox-9 label:has(:checked)::before {
  background-color: #2589d0;
}

.checkbox-9 label:has(:checked)::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.checkbox-9 input {
  display: none;
}

リスト型のチェックボックス

ここでは、以下のリスト型のチェックボックスデザイン例を記載しています。

リスト型のチェックボックスデザイン
  • 枠線＆背景色

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もボックスページでは選択式でご用意しました。

調整項目一覧
  • 基調色
  • 形状：四角, 角丸（円）

ご興味があれば「チェックボックス一覧ページ」を一読ください。

Code Stock
CHECK-BOX | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Button type ボタン型のチェックボックス radio1 radio2 radio3 スタンダード▼ radio1 radio2…

枠線＆背景色

HTML｜形状：四角
<fieldset class="checkbox-10">
  <label>
    <input type="checkbox" name="checkbox-10" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-10"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-10"/>
    radio3
  </label>
</fieldset>
CSS｜形状：四角
.checkbox-10 {
  border: none;
}

.checkbox-10 label {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 200px;
  margin-bottom: .4em;
  padding: .5em .7em .5em 32px;
  border: 1px solid #2589d0;
  border-radius: 3px;
  background-color: #2589d026;
  cursor: pointer;
}

.checkbox-10 label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.checkbox-10 label::before {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background-color: #fff;
  content: '';
  box-sizing: border-box;
}

.checkbox-10 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
  content: '';
  box-sizing: border-box;
}

.checkbox-10 input {
  display: none;
}
HTML｜形状：角丸
<fieldset class="checkbox-11">
  <label>
    <input type="checkbox" name="checkbox-11" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-11"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-11"/>
    radio3
  </label>
</fieldset>
CSS｜形状：角丸
.checkbox-11 {
  border: none;
}

.checkbox-11 label {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 200px;
  margin-bottom: .4em;
  padding: .5em .7em .5em 32px;
  border: 1px solid #2589d0;
  border-radius: 30px;
  background-color: #2589d026;
  cursor: pointer;
}

.checkbox-11 label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.checkbox-11 label::before {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  content: '';
  box-sizing: border-box;
}

.checkbox-11 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
  content: '';
  box-sizing: border-box;
}

.checkbox-11 input {
  display: none;
}
HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次