デザインcheckbox «

デザインcheckbox

ラベル

CSS

input[type=checkbox] {
    display: none;		/* checkboxを非表示にする */
}
.sample_label {
    position: relative;		/* ボックスの位置を指定する */
    padding: 0 0 0 25px;	/* ボックス内側の余白を指定する */
}
.sample_label:hover:after {
    border-color: #443e3a;	/* ボックスの境界線を実線で指定する */
}
.sample_label:after,  .sample_label:before{
    position: absolute;	/* ボックスの位置を指定する */
    content: "";		/* ボックスのコンテンツ */ 
    display: block;		/* ブロックレベル要素化する */ 
    top: 50%;			/* 上部から配置の基準位置を決める */ 
}
.sample_label:after {
    left: 0;			/* 左から配置の基準位置を決める */ 
    margin-top: -10px;	/* チェック枠の位置 */
    width: 15px;		/* ボックスの横幅を指定する */
    height: 15px;		/* ボックスの高さを指定する */
    border: 2px solid #beb4ad;	/* ボックスの境界線を実線で指定する */
}
.sample_label:before {
    left: 6px;			/* 左から配置の基準位置を決める */ 
    margin-top: -9px;	/* チェックマークの位置 */
    width: 5px;			/* ボックスの横幅を指定する */
    height: 9px;		/* ボックスの高さを指定する */
    border-right: 3px solid #443e3a;	/* 境界線（右）のスタイルを指定する */
    border-bottom: 3px solid #443e3a;	/* 境界線（下）のスタイルを指定する */
    transform: rotate(45deg);	/* 要素を回転させる */
    opacity: 0;			/* 要素を透過指定する */
}
input[type=checkbox]:checked + .sample_label:before {
    opacity: 1;		/* 要素を表示する */
}

snipetsNakazawa's Collection

デザインcheckbox

CSS

HTML

CONTENTS