Widget HTML and selectors

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.

Prefer CSS variables before selector overrides. Selector-based CSS is more likely to need updates after future widget changes.

Initial selector form

The first visible view is the vehicle selector form.

<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:

#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:

.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:

[data-torque] {}
[data-torque-unit] {}
[data-stage] {}

The dyno chart reads chart colors from variables such as:

--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.

<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:

#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.

#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:

#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:

/* 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.

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

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

​Initial selector form

​Vehicle result area

​Quote panel

​Dealer map and pricing selectors

​Safe selector patterns

​Class list snapshot

​ID list snapshot

Initial selector form

Vehicle result area

Quote panel

Dealer map and pricing selectors

Safe selector patterns

Class list snapshot

ID list snapshot