Search Highlighter — Styling

Two common ways to customize how hits look:

  1. Override CSS variables (cssVars) so you can theme without adding custom CSS.
  2. Provide per-table inline hit styles (hitStyle).

Default

Search for alpha, svc, "Alpha cluster".

Name Department Notes
svc_backupITNightly backup job for Alpha cluster
aliceHROnboarding: Alpha / Bravo / Charlie
bobFinanceQuarterly report for Bravo region
svc_sqlDBASQL maintenance window – Alpha and Delta
carolITIncident review: gamma outage

CSS Variables

High-contrast yellow via cssVars. Search for alpha, svc, bravo.

Name Department Notes
svc_backupITNightly backup job for Alpha cluster
aliceHROnboarding: Alpha / Bravo / Charlie
bobFinanceQuarterly report for Bravo region
svc_sqlDBASQL maintenance window – Alpha and Delta
carolITIncident review: gamma outage

Inline Hit Style (Badge)

Green badge-like hits via hitStyle. Search for alpha, svc, delta.

Name Department Notes
svc_backupITNightly backup job for Alpha cluster
aliceHROnboarding: Alpha / Bravo / Charlie
bobFinanceQuarterly report for Bravo region
svc_sqlDBASQL maintenance window – Alpha and Delta
carolITIncident review: gamma outage

Inline Hit Style (Underline)

Underline-only (no background) via hitStyle. Search for alpha, report, outage.

Name Department Notes
svc_backupITNightly backup job for Alpha cluster
aliceHROnboarding: Alpha / Bravo / Charlie
bobFinanceQuarterly report for Bravo region
svc_sqlDBASQL maintenance window – Alpha and Delta
carolITIncident review: gamma outage

Configuration

$('#demoSearchHighlighterDefault').DataTable({
  searching: true,
  searchHighlighter: true
});

$('#demoSearchHighlighterCssVars').DataTable({
  searching: true,
  searchHighlighter: {
    cssVars: {
      '--hfx-dt-search-hit-bg': '#fff3bf',
      '--hfx-dt-search-hit-color': '#000',
      '--hfx-dt-search-hit-radius': '6px'
    }
  }
});

$('#demoSearchHighlighterInlineBadge').DataTable({
  searching: true,
  searchHighlighter: {
    hitStyle: {
      backgroundColor: '#d3f9d8',
      textColor: '#0b2e13',
      css: {
        'border': '1px solid #2f9e44',
        'border-radius': '6px',
        'padding': '0 3px',
        'box-shadow': '0 0 0 1px rgba(0,0,0,0.04)'
      }
    }
  }
});

$('#demoSearchHighlighterUnderline').DataTable({
  searching: true,
  searchHighlighter: {
    tag: 'span',
    hitStyle: {
      backgroundColor: 'transparent',
      textColor: '#111',
      css: {
        'box-shadow': 'inset 0 -2px 0 0 #ffd43b',
        'padding': '0 1px',
        'border-radius': '0',
        'font-weight': '600'
      }
    }
  }
});