HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「*」の変更オプションがない” というものがあります。下記キャプチャの部分ですね。
![必須の記号が「*」である様子のキャプチャ](https://www.pensees.co.jp/hs-fs/hubfs/how-to-hubspot/tips/img/modify-require-text-with-css.png?width=1537&name=modify-require-text-with-css.png)
「これを『必須』にしたい」という要望をよくいただきますので、CSSだけで完結する方法をご紹介します。といっても仕組みさえ思い付けば割とシンプルで、次のようなコードになります。
.hs-form-required {
font-size: 0;
}
.hs-form-required::after {
content: '必須';
font-size: .8rem;
}
表示は次の通りです。
![必須の記号を書き換えた様子のキャプチャ](https://www.pensees.co.jp/hs-fs/hubfs/how-to-hubspot/tips/img/modify-require-text-with-css02.png?width=1537&name=modify-require-text-with-css02.png)
ポイントはfont-size: 0;
で、これがないと「*」は消えません。とはいえdisplay, visibility, opacity
などで消そうとしても子要素となる::after
も消えてしまうので、font-size
で制御します。少しかゆいのは “必須” のfont-size
にem
を使えないことですが、仕方ないですね。