---
title: フォームの必須文言をCSSだけで制御する
description: HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「*」の変更オプションがない” というものがあります。「これを『必須』にしたい」という要望をよくいただきますので、CSSだけで完結する方法をご紹介します。
image: https://demo.100inc.co.jp/hubfs/Imported_Blog_Media/modify-require-text-with-css02.png
---

フォームの必須文言をCSSだけで制御する

# フォームの必須文言をCSSだけで制御する

[半田 惇志](https://demo.100inc.co.jp/category-test/author/半田-惇志)  Dec 13, 2021, 12:00:00 AM

HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「\*」の変更オプションがない” というものがあります。下記キャプチャの部分ですね。  
![必須の記号が「*」である様子のキャプチャ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported_Blog_Media/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://demo.100inc.co.jp/hs-fs/hubfs/Imported_Blog_Media/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`を使えないことですが、仕方ないですね。

[CMS Hub](https://demo.100inc.co.jp/category-test/tag/cms-hub)

[CMS Hub](https://demo.100inc.co.jp/category-test/tag/cms-hub)