お問い合わせフォームの入力時にフォームが目立つように表示して、フォームの入力に集中しやすいようにしてみました。
フォームを目立たせるやり方
お問い合わせフォームは以下のショートコードで表示されています。
[contact-form-7 id="***" title="お問い合わせフォーム" html_class="form-within"]html_class="form-within" により form タグにクラス form-within を指定しています。
以下の CSS を記述してクラス form-within のスタイルを設定しています。
/*-------------------------------------------*/
/* :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%です。