どうも、年明けからワードプレス を触り始めた結果、10年間テキストエディタでタグ打ちし続けた本業のサイトをワードプレスへ移行することにしたカナタです。
それに伴い、親の会社のサーバーに間借りしていたこのブログも、自分の契約しているサーバーに引っ越しました。
スッキリしたぜ。（気分的＆データ的に）
さて、本業のサイトの方では結構複雑な問い合わせフォームを実装する必要があり、定番のContact Form 7 を Contact Form 7 Conditional Fields で条件分岐させて使っています。
これがまあ便利。（タグ打ち時代は条件分岐の実装が面倒臭くて数年放置してた）
ところが色々弄っていると、clear_on_hide（非表示になったエリアの入力された内容を消去する）オプションが効かなくなってしまい、Google先生に聞いてみてもよく分からず、結局自力で解決したので紹介しておきます。
formのデザインを弄っていたらclear_on_hideが効かなくなった
デフォルトのチェックボックスやラジオボタンってダサいですよね。
input[type=checkbox] や input[type=radio] をCSSで非表示にし、ラベルの文字列に:before要素を使って擬似的なチェックボックス、ラジオボタンをFont Awesomeで作ることにしました。
ところが、デザインをいじっている最中に、clear_on_hideが効かなくなるというアクシデント発生。
clear_on_hideが効かない原因
一度CSSを全部削除してみたところ正常に動作。CSSをひとつずつ消したり戻したりしつつチェックしてみた結果、どうやら input[type=checkbox] や input[type=radio] に display:none; をかけるとclear_on_hideが無効になるらしいことが判明しました。
clear_on_hideを有効にしたままチェックボックスやラジオボタンを隠す方法
じゃあどうやってだっさいチェックボックス消したらいいのって話なんですが。
display:none; の代わりに visibility:hidden; を使えば大丈夫でした。
visibilityの仕様上、妙な余白だけ残るのでwidth:0;で消してしまいましょう。
input[type=checkbox], input[type=radio] {
visibility:hidden;
width:0;
}今のところこれで問題なく動いています。
