デイトラweb制作上級編パターン2  DAY31~44⑨

卒業制作課題パターン2 9日目

PC版

スマホ版

Contact Form 7でフォームを作成する方法(wordpress環境時)

→ 上級編  DAY31~44⑰

日付入力欄の作成

HTML

<div class="p-reservation__form-item">
    <dt class="p-reservation__form-label">
        <label>希望日</label>
    </dt>
    <dd class="p-reservation__form-input">
        <label class="p-reservation__form-date">
            <input name="" type="date" placeholder="年 / 月 / 日">
        </label>
        <label class="p-reservation__form-date">
            <input name="" type="date" placeholder="年 / 月 / 日">
        </label>
        <label class="p-reservation__form-date">
            <input name="" type="date" placeholder="年 / 月 / 日">
        </label>
    </dd>
</div>

SCSS

.p-reservation__form-item {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #DDDDDD;

    @include mq('sp') {
        display: block;
        padding: 21px 0;
    }

    &:first-child {
        border-top: 1px solid #DDDDDD;
    }
}

// 左側(希望日)
.p-reservation__form-label {
    width: 32.967032967%;
    line-height: 2.25;

    @include mq('sp') {
        width: 100%;
        margin-bottom: 8px;
    }
}

// 右側(年 / 月 / 日)
.p-reservation__form-input {
    width: 100% - 32.967032967%;

    @include mq('sp') {
        width: 100%;
    }

    input:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s !important;
    }

    // input type の設定
    [type="date"] {
        box-shadow: none;
        border: none;
        background: #F6F6F6;
        padding: 10px 13px;
        appearance: none;
        border-radius: 4px;
        font-family: inherit;
        font-size: 16px;
        font-weight: inherit;
        width: 100%;
        position: relative;

        @include mq('sp') {
            font-size: inherit;
            padding: 13px 17px;
        }

        &::before {
            position: absolute;
            content: "";
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url(../img/reservation/icon-calendar.png) no-repeat center center / contain;
        }
    }

    // デフォルトのアイコン
    [type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        // 見えなくして機能だけ残す
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

まとめ

今回も卒業制作課題を進めました。

フォーム自体は何回も作っているのですが、日付入力欄を作成するのは初めてです。

ラジオボタンやチェックボックス、セレクトボックスができれば、フォームはとりあえずokという印象だったので少し新鮮でした。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です