このフォームの作り方
フォームは以下のショートコードで表示されています。form タグにはクラス form-within が指定されます。
[contact-form-7 id="118" title="コンタクトフォーム" html_class="form-within"]style.css に以下の行を追加してあります。
/*-------------------------------------------*/
/* :focus-within を使ったお問い合わせフォーム
/*-------------------------------------------*/
form.form-within {
border: 1px dashed #333;
padding: 25px;
transition: background 0.5s ease;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
}
form.form-within:focus-within {
background: #f4d35e;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}
vmax はビューポートの長辺に対する割合で指定する長さ単位で、1vmax はビューポートの長辺の1%です。
