チェックボックスCSS

チェックボックスを使う

code:style.css

/* チェックボックスになるタグ v2 Font Awesome版 */

.line:not(.cursor-line) ahref$='/o':not(.icon) span,

.line:not(.cursor-line) ahref$='/v':not(.icon) span,

.line:not(.cursor-line) ahref$='/x':not(.icon) span {

display: inline-block; width: 0; text-indent: -9999px }

.line:not(.cursor-line) ahref$='/o':not(.icon)::after,

.line:not(.cursor-line) ahref$='/v':not(.icon)::after,

.line:not(.cursor-line) ahref$='/x':not(.icon)::after {

display: inline-block;

min-width: 1.15em;

padding-left: 1px;

font-family: 'Font Awesome 5 Free';

font-weight: 400;

font-size: 120%;

text-align: center;

vertical-align: top; /* アイコンを上に配置 */

position: relative; /* 相対位置を指定 */

top: -0.9px; /* 上に移動するピクセル数を調整 */

}

.line:not(.cursor-line) ahref$='/o':not(.icon)::after { content: '\f0c8'; color: var(--non-exist-color) }

.line:not(.cursor-line) ahref$='/v':not(.icon)::after { content: '\f14a'; color: var(--exist-color) }

.line:not(.cursor-line) ahref$='/x':not(.icon)::after { content: '\f057'; color: #FF3F3F }

使用方法

[o] o

[v] v

[X] x

v チェックマークがあった際に少しずれて見える？

top: -0.9pxに変更