Skip to main content
The widget exposes predictable CSS class names prefixed with jigts-. You can override any of them in your own stylesheet to match the widget to your site’s branding.
You may need to use !important in your CSS rules to ensure your custom styles take precedence over the widget’s default styles.

​
Quick Example

Here’s a simple override for the trigger button: 
.jigts-widget-trigger {
  background-color: #eee !important;
  border-radius: 8px !important;
}
Add this rule to your main CSS file or a <style> block in your HTML. The widget picks up your custom styles automatically.

​
CSS Selector Reference

​
Widget Container & Positioning

SelectorDescription
.jigts-translation-widgetMain container
.jigts-widget-triggerMain trigger button
.jigts-widget-dropdownDropdown menu container

​
Trigger Button

SelectorDescription
.jigts-widget-triggerMain trigger button
.jigts-trigger-contentContent inside the trigger
.jigts-trigger-iconIcon container in trigger
.jigts-languages-iconLanguage globe icon (SVG)
.jigts-trigger-loadingLoading state container
.jigts-loading-spinnerSpinner animation
SelectorDescription
.jigts-widget-dropdownDropdown container
.jigts-dropdown-headerHeader section
.jigts-dropdown-titleTitle area
.jigts-title-leftLeft side of title (icon + text)
.jigts-title-textTitle text
.jigts-language-countLanguage count badge

​
Search Section

SelectorDescription
.jigts-search-containerSearch input container
.jigts-search-iconSearch icon
.jigts-search-inputInput field
.jigts-clear-searchClear search button

​
Reset Option

SelectorDescription
.jigts-reset-optionReset to original language button
.jigts-reset-iconReset icon (SVG)
.jigts-reset-textReset text container
.jigts-reset-titleReset title text
.jigts-reset-subtitleReset subtitle text

​
Language List

SelectorDescription
.jigts-language-listList container
.jigts-language-itemLanguage item
.jigts-language-item.selectedSelected item
.jigts-language-item.focusedFocused item
.jigts-language-nameName text
.jigts-language-codeCode badge
.jigts-language-detailsExtra details
.jigts-no-resultsNo results message container
SelectorDescription
.jigts-dropdown-footerFooter section
.jigts-footer-textFooter text

​
Responsive & Accessibility

SelectorDescription
@media (max-width: 640px)Mobile styles
@media (prefers-contrast: high)High contrast mode
@media (prefers-reduced-motion: reduce)Reduced motion

​
Dark Theme Example

Here’s a practical example of customizing the widget to match a dark-themed site: 
.jigts-widget-trigger {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
  border: 1px solid #444 !important;
}
.jigts-widget-dropdown {
  background-color: #16213e !important;
  border-color: #444 !important;
}
.jigts-language-item:hover {
  background-color: #0f3460 !important;
}
Use your browser’s DevTools (right-click → Inspect) to identify which jigts- class applies to the element you want to style, then experiment with overrides directly in the Styles panel before adding them to your stylesheet.

Build docs developers (and LLMs) love

Get started for freeTalk to us