【CSSのみ】ヘルプボタンを作成する

最終更新日: 公開日: 2021年12月

画像を使用しないヘルプボタン

【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法 では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボックスを利用していますので、チェックボックスは常に非表示にしています。

チェックボックスを非表示にする前は以下のようになっています。

上記のヘルプボタンを使って実際に動かせるサンプルを用意しました。

好きな動物は何ですか?

サンプルコード

HTML

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./helpbutton.css">
  </head>
  <body>
    <label class="helpbutton">
      <input type="checkbox" class="checkhelp">
    </label>
  </body>
</html>

CSS

.checkhelp {
  display: none;
}
.helpbutton:after{
  content: "?";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 1.4;
  color: black;
  border: solid;
  font-weight: bold;
}
.helpbutton:hover {
  cursor: pointer;
}

解説

チェックボタンのクリックに対応できるように、label タグに疑似要素を使用してヘルプボタンを作成しました。
今回、チェックボックスは常に非表示にしてしまうので、サンプルでは疑似要素に after を利用していますが before, after のどちらでも大丈夫です。
画像を用意するよりも簡単に、好きなようにデザインを変更することができるので、用途に応じて色や枠の形を変えて使っていただければと思います。

関連ページ

No tags for this post.
 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop