【Cssだけ】WordPressプラグインMW WP Formでチェックボックスをカスタマイズ

Web制作

こんにちは。
Web制作者のhikaruです。

今回はWordPressプラグイン「MW WP Form」で、チェックボックスをカスタマイズする方法を紹介していきます。

ここで紹介する方法は、divタグなどでラップする必要はないので手軽にご利用できます。

作成するチェックボックスのサンプル

チェックボックスを作成する

「MW WP Form」でチェックボックスを作成して次のコードを発行しました。

[mwform_checkbox name="check" id="check" class="check" children="value01,value02,value03" separator=","]

特別、divタグなどで囲むことはしていないシンプルな構造です。

チェックボックスにCSSを適応する

次のCSSを適応します。

input[type="checkbox"] {
    /* デフォルトcheckボックス非表示*/
    display: none;
}

.mwform-checkbox-field-text {
    display: inline-block;
    position: relative;
    padding: 0 36px 0 36px;
}

.mwform-checkbox-field-text::before,
.mwform-checkbox-field-text::after {
    content: "";
    position: absolute;
    display: block;
}

.mwform-checkbox-field-text::before {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.mwform-checkbox-field-text::after {
    border-width: 3px;
    border-color: transparent transparent #78a6e4 #78a6e4;
    border-style: solid;
    width: 20px;
    height: 10px;
    margin-top: -0.2em;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
    opacity: 0;
}

input[type="checkbox"]:checked + .mwform-checkbox-field-text::after {
    /* css擬似要素 :checked が付加されているときは表示  */
    opacity: 1;
}

最初にデフォルトのチェックボックスを「display:none」で非表示に。

その後、チェックマークを「::before」「::after」を組み合わせて作成することでhtmlの構造をシンプルに保っています。

チェックマークの表示切り替えに関しては、非表示にしたチェックボックスに擬似要素「:checked」が付加されているとき、隣接セレクタで直下にある「::after」要素のopacityを1に変更して対応。

class名はデフォルトから変更していないので、そのまま使えると思いますが、変更する場合は各自でお願いします。

まとめ

今回はWordPressプラグイン「MW WP Form」でチェックボックスをカスタマイズする方法を紹介しました。

Form周りはブラウザによって表示差があるので、凝ったデザインを構築する際は手間がかかる部分だと思います。

ここで紹介した方法はCssだけでスタイルが可能なので、コーディングに制約がある場合や、後から付け足しが難しい時にはおすすめです。

以上、「MW WP Form」でチェックボックスをカスタマイズする方法でした。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP