COLUM

コラム

画像を使ってcheckboxを選択!ついでに選択数にJSPで制限をつける

HTML・CSS

2021/11/11

画像を使ってcheckboxを選択!ついでに選択数にJSPで制限をつける

チェックボックスの四角を消して画像で選択する方法です。2件選択したら選択済の画像を未選択にしないと別の画像が選択できません。

サンプル
お好みの家を2件まで選択してください!

※画像はマキハウス様よりお借りしました。

MODXのメールフォーム「cfFormMailer」を使う場合、ちょくちょく使うので備忘録代わりに記載しています。

HTML

 

SCRIPT



 

CSS

.sample_checkbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
}
.sample_checkbox div{width:33.33%;}
.sample_checkbox label:hover {cursor: pointer;}
.sample_checkbox>div p{padding-top: 5px;font-size:13px !important;}
.sample_checkbox>div input[type="checkbox"] {display: none;}
.sample_checkbox>div input[type="checkbox"] + label img {
    opacity: .55;
    filter: alpha(opacity=55);
    -ms-filter: "alpha(opacity=55)";
    -khtml-opacity: .55;
    -moz-opacity: .55;
}
.sample_checkbox>div input[type="checkbox"]:checked + label img {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1;
    -moz-opacity: 1;
    border: #000 solid 3px;
    box-sizing: border-box;
}
.sample_checkbox>div input[type="checkbox"]:checked + label p{font-weight:800;}

| 一覧へ

CONTACT

092-406-9941

受付 9:30~18:00(土・日・祝日除く)

MEETING

福岡市近郊は
無料でお伺いします

九州