CSS チェックボックス ジェネレータ
カスタムスタイルの CSS チェックボックスまたはトグルスイッチを生成します。スタイル、色、サイズ、コーナー半径、アニメーション速度を選択し、すぐに使える CSS と HTML をコピーできます。純粋な CSS、キーボードアクセス可能、JavaScript 不要。
入力
ボックスの高さ。トグルスイッチスタイルは高さの 1.8 倍の幅になります。
チェック状態とキーボードフォーカスリングに使用されます。
チェックなし時のボーダーカラー。トグルスイッチスタイルではトラックカラーになります。
チェックマーク、クロス、またはトグルノブ。アウトラインは無視され、アクセントカラーでチェックマークが描かれます。
四角形のスタイルに適用されます。塗りつぶされた円とトグルスイッチは常に完全に丸くなります。
チェック/チェック解除トランジションの長さ (0.05-1s)。
HTML スニペットのチェックボックスの隣に表示されます。ベアコントロール用に空白のままにします。
生成されたすべてのクラスに名前空間を付けるため、CSS がスタイルシートと衝突しません。
出力
チェックボックスがここに表示されます。
実際に生成されたチェックボックスは Shadow DOM に分離されています。クリックしてアニメーションを確認します。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-checkbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "filled",
"size": "24",
"accentColor": "#2563eb",
"borderColor": "#9ca3af",
"checkColor": "#ffffff",
"radius": "6",
"duration": "0.2",
"labelText": "I agree to the terms",
"classPrefix": "io"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-checkbox-generator` tool (CSS Checkbox Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-checkbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS チェックボックス ジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
何ができるか
CSS チェックボックス ジェネレータは、カスタムスタイルのチェックボックス — またはトグルスイッチ — を自立した CSS + HTML スニペットとして構築します。スタイルを選択し、色、サイズ、コーナー半径、アニメーション速度を設定して、2 つのコードブロックをプロジェクトに直接コピーします。すべて純粋な CSS です。JavaScript、アイコンフォント、SVG スプライト、依存関係はありません。
本物のチェックボックスをスタイル設定し、偽のものではありません
ほとんどのカスタムチェックボックススニペットは、ネイティブ <input> を画面外に隠し、その隣に <span> を描画します。視覚的には機能しますが、ブラウザが無料で提供するすべてを破棄します。このジェネレータは代わりに、実際の <input type="checkbox"> に appearance: none を設定し、::before / ::after 疑似要素でボックス、チェックマーク、トグルノブを描画します。
実際の違い: コントロールは Tab キーでフォーカスを受け取り、Space キーでトグルされ、周囲のフォームで値を送信し、スクリーンリーダーによってチェックボックスとしてアナウンスされます。余分なマークアップや ARIA がありません。
生成されたスタイルシートは、コピー＆ペーストのチェックボックスが通常省略する 3 つのものも提供します:
- キーボードユーザーがどこにいるかを見ることができるように、アクセントカラーのリング
:focus-visible; :disabled状態 (薄暗い、not-allowedカーソル);- モーション削減を要求したユーザーのトランジションとバウンスアニメーションをオフにする
@media (prefers-reduced-motion: reduce)ブロック。
6 つのスタイル
- 塗りつぶされた四角 — クラシック: アクセントカラーで塗りつぶされた境界を持つボックスと、回転した境界から描かれたチェックマークが表示されます。
- アウトライン — ボックスは透明なままです。境界線とチェックマークのみがアクセントカラーを取得します。暗い背景または忙しい背景に適しています。
- 塗りつぶされた円 — 完全に丸いボックスの同じ塗りつぶしとチェックマーク動作。
- トグルスイッチ — ピル型トラック、チェック時にスライドするノブ。マークアップは常にチェックボックスなので、フォームで変更なしで機能します。
- ジェリーバウンス — チェック時にスクイーズとストレッチ
@keyframesバウンスアニメーションを持つ塗りつぶしボックス。 - クロスマーク — アクセントカラーで塗りつぶされ、✓ の代わりに ✗ でマークされます。「除外」または「削除」のセマンティクス用です。
使い方
- チェックボックスのスタイル を選択します。
- サイズ を設定します — ピクセル単位のボックスの高さ。トグルスイッチは自動的に高さの 1.8 倍の幅になります。
- 3 つの色を選択します: アクセント (チェック状態とフォーカスリング)、チェックなし (休止時の境界、またはトグルトラック)、チェックマーク (チェックマーク、クロス、またはノブ)。
- 四角形のスタイルの コーナー半径 とチェック/チェック解除トランジションの アニメーション期間 を調整します。
- ラベルテキスト を設定し、プロジェクトが既に一般的なクラス名を使用している場合は クラス接頭辞 を設定します。生成されたクラスはそれで名前空間が付けられるため、ルールは既存のスタイルシートと衝突しません。
- CSS をスタイルシートにコピーし、HTML をマークアップにコピーします。
FAQ
これは <form> の内側でも機能しますか?
はい。スタイル設定されている要素 は チェックボックスなので、スタイル設定されていない場合と同じように name と value を送信します。生成されたマークアップの <input> に name="..." を追加します。
1 ページで複数を使用するにはどうすればいいですか?
CSS を 1 回貼り付けて、<label> マークアップを何度でも再利用してください。ルールはクラスベースであり、ID ベースではありません。1 ページ上で 2 つの異なる外観の場合は、別の クラス接頭辞 を使用して 2 番目のスタイルを生成します。
チェックマーク色がアウトラインスタイルで無視されるのはなぜですか? アウトラインはボックスを意図的に透明に保つため、白いチェックマークは明るいページでは見えません。そのスタイルは常にアクセントカラーでチェックマークを描画します。
コーナー半径は円またはスイッチに何かしますか? いいえ。両方とも設計上常に完全に丸くなります。半径は塗りつぶされた四角、アウトライン、ジェリーバウンス、クロスマークに適用されます。
このツールは何かアップロードしますか? いいえ。スニペットはブラウザで選択した値から生成されます。サーバーに送信されたり、保存されたりすることはありません。
関連ツール
他のフォームやコンポーネント CSS が必要ですか? CSS ローディングアニメーション ジェネレータ は対応する pure-CSS スピナーを構築し、CSS ボックスシャドウ ジェネレータ はフォームが配置されているカードのスタイル設定を支援します。また、CSS キーフレームアニメーション ジェネレータ は独自のカスタムチェックアニメーションを作成したい場合の場所です。完成したスタイルシートをダウンロード前に縮小するには、CSS Minifier & Beautifier を通して実行します。