---
title: フォームの必須文言をCSSだけで制御する｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「*」の変更オプションがない” というものがあります。「これを『必須』にしたい」という要望をよくいただきますので、CSSだけで完結する方法をご紹介します。
image: https://demo.100inc.co.jp/hubfs/Imported%20images/logo.png
---

[![株式会社100ロゴ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported%20images/logo.png?width=60&height=45&name=logo.png)](https://demo.100inc.co.jp)

Dec 13, 2021, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)

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

## 目次

HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「\*」の変更オプションがない” というものがあります。下記キャプチャの部分ですね。  
![必須の記号が「*」である様子のキャプチャ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported_Blog_Media/modify-require-text-with-css-Dec-30-2022-06-39-38-0282-AM.png?width=1537&name=modify-require-text-with-css-Dec-30-2022-06-39-38-0282-AM.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-1.png?width=1537&name=modify-require-text-with-css02-1.png)

ポイントは`font-size: 0;`で、これがないと「\*」は消えません。とはいえ`display, visibility, opacity`などで消そうとしても子要素となる`::after`も消えてしまうので、`font-size`で制御します。少しかゆいのは “必須” の`font-size`に`em`を使えないことですが、仕方ないですね。

- [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fmodify-require-text-only-with-css)
- [ツイート](https://twitter.com/share?text=%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E5%BF%85%E9%A0%88%E6%96%87%E8%A8%80%E3%82%92CSS%E3%81%A0%E3%81%91%E3%81%A7%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B%EF%BD%9CTips%EF%BD%9C%E6%97%A5%E6%9C%AC%E3%83%88%E3%83%83%E3%83%97%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEHubSpot%E3%83%86%E3%83%83%E3%82%AF%E4%BC%81%E6%A5%AD+%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%91%E3%83%B3%E3%82%BB&url=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fmodify-require-text-only-with-css)

執筆者：[Admin](https://demo.100inc.co.jp/blog/author/admin)

## 関連記事

## 人気の記事

- Nov 22, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater)
- Dec 30, 2022, 3:22:31 PM
    - [#sample](https://demo.100inc.co.jp/blog/tag/sample)
  
  
  [テストpost（複製）](https://demo.100inc.co.jp/blog/アカデミー練習-1-0)
- Jun 20, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [CSSやJSの修正をすぐに確認したければ、プレビューURLで](https://demo.100inc.co.jp/blog/tips/check-update-on-preview-url)
- Dec 11, 2017, 12:00:00 AM
    - [ブログ](https://demo.100inc.co.jp/blog/tag/ブログ)
  
  
  [INBOUND 2017参加レポート サブセッション編](https://demo.100inc.co.jp/blog/tips/inbound-2017-subsessions)
- May 9, 2024, 1:20:53 PM
    - [#通常のタグ](https://demo.100inc.co.jp/blog/tag/通常のタグ)
  
  
  [test](https://demo.100inc.co.jp/blog/test-shida)

© Pensees