> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remapdb.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget HTML and selectors

> Current Remapdb widget iframe structure and useful selectors for custom CSS.

The Remapdb widget renders inside an iframe. Custom CSS is also injected inside that iframe.

Use this page as context for AI assistants that need to understand the widget structure before generating CSS.

<Warning>
  Prefer [CSS variables](/widget/branding/css-variable-reference) before selector overrides. Selector-based CSS is more likely to need updates after future widget changes.
</Warning>

## Initial selector form

The first visible view is the vehicle selector form.

```html theme={null}
<div class="container-fluid p-0 position-relative" data-iframe-size>
  <div id="quoting-success" class="d-none">...</div>
  <div id="vehicle-quote"></div>

  <div id="vehicle-form-content" class="p-4">
    <div id="rdb-alert-info" class="alert alert-info d-none">...</div>

    <div id="vehicle-form" class="row g-2">
      <select id="vehicle-type" class="form-select component-size">...</select>
      <select id="brand" class="form-select component-size">...</select>
      <select id="model" class="form-select component-size">...</select>
      <select id="generation" class="form-select component-size">...</select>
      <select id="engine" class="form-select component-size">...</select>
      <button id="show-remap" class="btn btn-secondary component-size">View remap</button>
      <div id="rdb-alert-danger" class="d-none">...</div>
    </div>
  </div>

  <div id="vehicle-content-placeholder" class="bg-widget-content-1 placeholder-glow d-none">...</div>
  <div id="vehicle-content" class="bg-widget-content-1 d-none">...</div>
</div>
```

Useful selectors:

```css theme={null}
#vehicle-form-content {}
#vehicle-form {}
#vehicle-form .form-select {}
#vehicle-type {}
#brand {}
#model {}
#generation {}
#engine {}
#show-remap {}
#rdb-alert-info {}
#rdb-alert-danger {}
#vehicle-content-placeholder {}
#vehicle-content {}
```

## Vehicle result area

After the visitor clicks **View remap**, Remapdb loads vehicle details and performance data into `#vehicle-content`.

Common classes in the result area:

```css theme={null}
.bg-widget-content-1 {}
.bg-car-spec2 {}
.brand-logo {}
.text-title {}
.text-table-1 {}
.form-section {}
.form-section-label {}
.text-disclaimer2 {}
.border-disclaimer2 {}
.placeholder {}
.text-placeholder {}
```

Common data attributes used by JavaScript:

```css theme={null}
[data-torque] {}
[data-torque-unit] {}
[data-stage] {}
```

The dyno chart reads chart colors from variables such as:

```css theme={null}
--rdb-chart-color-2
--rdb-chart-border-color-1
--rdb-chart-border-color-2
--rdb-chart-border-color-3
--rdb-chart-axis-color
```

## Quote panel

The quote panel is injected into `#vehicle-quote`.

```html theme={null}
<div id="quote-title" class="p-4 bg-modal">
  <div class="modal-title text-modal">Request a quote</div>
  <button class="btn btn-link close-quote">...</button>
</div>

<div class="quote-container">
  <form id="quote-form">
    <div class="form-control-parent">
      <label class="form-label" for="quote-name">Name</label>
      <input id="quote-name" class="form-control component-size">
      <div class="form-text">...</div>
      <div class="invalid-feedback">...</div>
    </div>

    <input id="quote-email" class="form-control component-size">
    <input id="quote-phone" class="form-control component-size">
    <input id="quote-location" class="form-control component-size">
    <input id="quote-reg" class="form-control component-size">
    <input id="quote-vin" class="form-control component-size">
    <select id="quote-service" class="form-select component-size">...</select>
    <select id="quote-dealer" class="form-select component-size">...</select>
    <textarea id="quote-text" class="form-control component-size"></textarea>
    <div id="quote-files">...</div>
    <button id="quote-submit" class="btn component-size">...</button>
  </form>
</div>
```

Useful quote selectors:

```css theme={null}
#vehicle-quote {}
#quote-title {}
#quote-form {}
#quote-form .form-control {}
#quote-form .form-select {}
#quote-name {}
#quote-email {}
#quote-phone {}
#quote-location {}
#quote-reg {}
#quote-vin {}
#quote-service {}
#quote-dealer {}
#quote-text {}
#quote-files {}
#quote-submit {}
.quote-container {}
.quote-custom-message {}
.quote-file-dropzone {}
.quote-more-options {}
.close-quote {}
```

## Dealer map and pricing selectors

These elements appear only when the related quoting features are enabled.

```css theme={null}
#quote-dealers-map {}
#quote-dealers-map-toggle {}
#quote-dealers-map-panel {}
#quote-dealer-details {}
#price-estimate-container {}
#price-estimate {}
#price-estimate-tooltip {}
```

## Safe selector patterns

Use focused selectors:

```css theme={null}
#vehicle-form .form-select {
  border-radius: 0.5rem;
}

#show-remap,
#quote-submit {
  font-weight: 800;
}

#quote-form .form-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
```

Avoid broad selector resets:

```css theme={null}
/* Avoid */
* {
  box-sizing: content-box;
}

/* Avoid */
.row {
  display: block;
}

/* Avoid */
.form-control {
  height: 80px;
}
```

## Class list snapshot

This is a compact list of useful classes currently present in the widget and quote form templates.

```text theme={null}
alert
alert-danger
alert-info
bg-car-spec2
bg-modal
bg-success-card
bg-widget-content-1
border-disclaimer2
brand-logo
btn
btn-icon
btn-link
btn-secondary
btn-sm
btn-w-icon-text
close-quote
component-size
container-fluid
form-check
form-check-component
form-check-input
form-check-label
form-control
form-control-parent
form-counter
form-element-counter
form-label
form-section
form-section-label
form-select
form-text
invalid-feedback
invalid-feedback-text
modal-title
placeholder
placeholder-glow
quote-container
quote-custom-message
quote-dealers-map
quote-file-dropzone
quote-file-input
quote-more-options
text-disclaimer2
text-modal
text-placeholder
text-success-card-1
text-success-card-2
text-table-1
text-title
```

## ID list snapshot

```text theme={null}
brand
engine
generation
model
price-estimate
price-estimate-container
price-estimate-tooltip
q-logo-container
q-logo-name-container
q-logo-name-container2
quote-controls
quote-dealer
quote-dealer-details
quote-dealers-map
quote-dealers-map-panel
quote-dealers-map-toggle
quote-email
quote-file-dropzone
quote-file-list
quote-files
quote-location
quote-name
quote-overlay
quote-phone
quote-phone-intl
quote-reg
quote-service
quote-submit
quote-text
quote-title
quote-vin
quoting-full-name
quoting-success
rdb-alert-danger
rdb-alert-info
show-remap
vehicle-content
vehicle-content-placeholder
vehicle-form
vehicle-form-content
vehicle-quote
vehicle-type
```