[{"id":"471bd01d-2c55-4895-b46f-811c4eed7571","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"da208fce-85ad-4c35-a5e3-87ff194b17ed","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"ac6cc2b2-6ddb-42d4-8bfa-95509e6448e2","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"99c67dff-427d-41b4-a4b0-144ec624500b","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"21d10235-4abe-486e-8859-6aa2f7edc442","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"361f2cdd-a34a-446b-8f53-16b7c82fb69a","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"2a3cece3-ed23-4e9f-a71f-226657337d2c","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"d8001871-044e-4afc-899d-e4104efcfbde","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"feb1cbab-9f1e-4233-b9db-11b2b9156c6d","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"a7942aeb-844b-42a6-83df-1c0aa8da3d0e","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"318074f6-ca29-4ed9-adb6-af319ab87121","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"3c29b05e-ef44-48c3-b836-6743680fa52a","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"5b86275f-ec58-4d09-b5c9-f0047fc3d2f3","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"55a78d7c-a608-4ff6-bb3c-f5993afc8631","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"64e9c9e5-dc70-4dcc-b101-824c175010f9","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"e7dd5528-b482-4399-9d5d-38d10a9b0ddb","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]}]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

タグボックスコントロールのCSS

本製品のタグボックスコントロールに適用できるCSSの一覧をこちらに記載します。

これらのCSSは以下のコントロールに適用されます。

  • タグボックスコントロール（GcTagBox）

スタイルの適用範囲

タグボックスは入力領域とドロップダウンリストをそれぞれ以下の部分のスタイルが適用されます。 undefined

また、タグは以下の部分のスタイルが適用されます。 undefined

全般

CSSクラス(概要) 適用箇所 CSSプロパティ
.gcim
(コントロールの基本スタイル)		 境界線 border, border-color, border-radiusなど
角丸 border-radius
幅 width
高さ height
背景(色、画像など) background, background-color, background-imageなど
.gcim_focused
(フォーカス取得時のスタイル)		 境界線 border, border-color, border-radiusなど
フォント font-family, font-sizeなど
幅 width
高さ height
文字色 color
背景(色、画像など) background, background-color, background-imageなど
.gcim__tagboxeditor .resize-corner
（リサイズ可の場合の右下角のスタイル）		 背景（色、画像など） background-color, background-image

コントロール入力領域

CSSクラス（概要） 適用箇所 CSSプロパティ
.gcim__tagboxeditor
(コントロール入力領域のスタイル)		 フォント font-family, font-sizeなど
幅 width
高さ height
文字色 color
背景(色、画像など) background, background-color, background-imageなど
.gcim__tagboxeditor .gcim__tagboxeditor-wrapper[disabled="true"] .tag
(コントロール無効時のスタイル)		 フォント font-family, font-sizeなど
幅 width
高さ height
文字色 color
背景(色、画像など) background, background-color, background-imageなど
.gcim__tagboxeditor .gcim__tagboxeditor-wrapper[readonly="true"] .tag
(コントロール読み取り専用時のスタイル)		 フォント font-family, font-sizeなど
幅 width
高さ height
文字色 color
背景(色、画像など) background, background-color, background-imageなど

ウォーターマーク

CSSクラス(概要) 適用箇所 CSSプロパティ
.tag-watermark
(フォーカスがないときのウォーターマークのスタイル)		 フォント font-family, font-sizeなど
文字色 color
背景色 background-color
.gcim_focused.tag-watermark
(フォーカス時のウォーターマークのスタイル)		 フォント font-family, font-sizeなど
文字色 color
背景色 background-color

コントロールのドロップダウンリスト

CSSクラス（概要） 適用箇所 CSSプロパティ
.gcim__listbox
（ドロップダウンリストの基本スタイル）		 境界線 border, border-color
角丸 border-radius
フォント font-family, font-sizeなど
文字色 color
背景（色、画像など） background, background-color, background-imageなど
.gcim__listbox .viewport .list-item:hover
（ホバー中のリストアイテムのスタイル）		 フォント font-family, font-sizeなど
文字色 color
背景（色、画像など） background, background-color, background-imageなど
.gcim__listbox .viewport .list-item[focused="true"]
（フォーカスがあるアイテムのスタイル）		 フォント font-family, font-sizeなど
文字色 color
背景（色、画像など） background, background-color, background-imageなど
.gcim__listbox .viewport .list-item[selected="true"]
（選択されているアイテムのスタイル）		 フォント font-family, font-sizeなど
文字色 color
背景（色、画像など） background, background-color, background-imageなど

タグ

CSSクラス(概要) 適用箇所 CSSプロパティ
.tagbox-content
(タグラベルテキストのスタイル)		 フォント font-family, font-sizeなど
幅 width
高さ height
文字色 color
背景(色、画像など) background, background-color, background-imageなど
.tag-input
(入力中のタグのスタイル)		 境界線 border, border-color
フォント font-family, font-sizeなど
幅 width
高さ height
文字色 color
背景色 background-color
.gcim_remove
(タグの削除ボタンのスタイル)		 色 color